Purpose

You always need to configure webpack for each of your projects, drop webpack.config.dev.js webpack.config.prod.js for development and production envs. Install tons of common modules like loaders and frameworks. Tooling is just an apporach to skip that verbose procedure.

Technologies

What tooling supports (which means you don't have to install these dependencies yourself):

• Webpack
• Babel 6 + Stage-0 + Runtime
• React with JSX
• Vue
• Vue-loader
• PostCSS with PreCSS
• Autoprefixer
• Hot reloading
• BrowserSync
• Custom HTML template
• Build or Watch
• Long-term caching

Real world example, run npm start in this repo or try it out 👉

Usage

Installing tooling via NPM is easy (WARN: only work for Node.js >= 4):

npm install tooling -g

Build a project in production mode:

# default entry is ./src/index
# in this case we use Vue in our app
tooling build --entry [entry]

# multi entry support
--entry example # => example[.ext] or example/index[.ext]
--entry app.js,app.css # => ['app.js', 'app.css']
--entry js:app.js,css:app.css # => {js: 'app.js', css: 'app.css'}

Run dev server with hot reloading:

# default entry is ./src/index
# in this case we use React in our app
tooling watch --entry [entry] --use react

Run tooling -h tooling watch -h tooling build -h to see more usages.

Set up custom index.html in package.json. see usage at html-webpack-plugin

{
	"name": "My tooling app",
	"tooling": {
	    "index": {
	      "title": "tooling index",
	      "template": "src/index.jade"
	    }
	}
}

For advanced usage: Wiki

API

WIP.

npm install tooling --save

import tooling from 'tooling'

/**
 * Tooling
 *
 * @param {string} type - 'watch' or 'build'
 * @param {object} options - options for webpack,
 * 					    - override the default settings.
 *				 options.port - available in 'watch' mode
 *							  - to set the port devServer should run at
 */
tooling(type, options)

Related

• (Chinese) 文章: tooling 让你从 jQuery 中解脱出来

License

MIT © EGOIST