feat(webpack): set framework now as an option

lib/webpack.config.js

@@ -17,6 +17,7 @@ const postcssPlugins = [
 ]
 
 module.exports = function (type, options) {
+	options.use = options.use || 'vue'
 	const config = {
 		entry: options.entry,
 		output: {
@@ -38,10 +39,6 @@ module.exports = function (type, options) {
 					loaders: ['babel'],
 					exclude: [/node_modules/]
 				},
-				{
-					test: /\.vue$/,
-					loaders: ['vue']
-				},
 				{
 				    test: /\.(png|jpg|gif)$/,
 				    loaders: ['url', 'file']
@@ -56,23 +53,35 @@ module.exports = function (type, options) {
 				}
 			]
 		},
-		vue: {
-			loaders: {
-			},
-			postcss: postcssPlugins
-		},
 		postcss: postcssPlugins,
 		babel: {
-		    presets: [require('babel-preset-es2015'), require('babel-preset-stage-0'), require('babel-preset-react')],
+		    presets: [require('babel-preset-es2015'), require('babel-preset-stage-0')],
 		    plugins: [require('babel-plugin-transform-runtime')]
 		},
 		plugins: []
 	}
+	// read tooling local config from package.json
     let localConfig = {}
     if (pathExists.sync(process.cwd() + '/package.json')) {
         localConfig = require(process.cwd() + '/package.json').tooling || {}
     }
+	// read html-webpack-plugin config from local tooling Config
 	const index = localConfig.index || {}
+	if (options.use === 'react') {
+		// push preset for React
+		config.babel.presets.push(require('babel-preset-react'))
+	} else if (options.use === 'vue') {
+		// push options for Vue
+		config.vue = {
+			// loaders: {},
+			postcss: postcssPlugins
+		}
+		// push vue-loader for Vue component
+		config.module.loaders.push({
+			test: /\.vue$/,
+			loaders: ['vue']
+		})
+	}
 	if (type === 'build') {
 		config.devtool = 'source-map'
 		config.output.filename = 'bundle.[chunkhash].js'
@@ -104,18 +113,20 @@ module.exports = function (type, options) {
 		  }, index)),
 		  new ExtractTextPlugin('styles.[contenthash].css')
 		]
-	}
-	else if (type === 'watch') {
+	} else if (type === 'watch') {
 		config.debug = true
 		config.watch = true
 		config.output.publicPath = '/'
 		config.output.path= process.cwd()
 		config.entry.push('webpack-hot-middleware/client')
 		config.devtool = 'cheap-module-eval-source-map'
-		config.babel.env = {
-			development: {
-	    		presets: [require('babel-preset-react-hmre')]
-	    	}
+		if (options.use === 'react') {
+			// enable hot mode replacement for React
+			config.babel.env = {
+				development: {
+		    		presets: [require('babel-preset-react-hmre')]
+		    	}
+			}
 		}
 		config.module.loaders.push(
 			{

package.json

@@ -12,7 +12,7 @@
     "email": "0x142857@gmail.com",
     "url": "github.com/egoist"
   },
-  "bin": "cli.js",
+  "bin": "tooling",
   "main": "index.js",
   "engines": {
     "node": ">=4.0.0"

readme.md

@@ -55,6 +55,7 @@ Options:
 |-p/--port|devServer port, available in watch mode|
 |--bs/--browsersync|Enable browserSync at port 23789|
 |-s/--silent|Do not open browser window when running devServer (not work if you enable browserSync)|
+|-u/--use|Set the framework you use, eg: `react`, `vue`. `vue` by default|
 
 **Set up custom index.html in `package.json`**. see usage at [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin)
 

cli.js → tooling

@@ -18,11 +18,13 @@ program
 	.option('-p, --port [serverPort]', 'Change port of server')
 	.option('--bs, --browsersync', 'Toggle browserSync')
 	.option('-s, --silent', 'Do not open browser window')
+	.option('-u, --use [usePresetsFor]', 'Use presets for React or Vue')
 	.action(watch)
 
 program
 	.command('build')
 	.option('-e, --entry [webpackEntry]', 'Set webpack entry"')
+	.option('-u, --use [usePresetsFor]', 'Use presets for React or Vue')
 	.action(build)
 
 program.parse(process.argv)

try-it-out.md

@@ -47,7 +47,7 @@ render(<Counter/>, document.querySelector('app'))
 
 ### Make it happen
 
-You're all set! Run `tooling watch --entry index` to start prototyping.
+You're all set! Run `tooling watch --entry index --use react` to start prototyping.
 
 Remember what, `hot reloading` is enabled!