feat: 集成dev和build命令

Author: cpselvis

lib/webpack.js lib/builder.jslib/webpack.js renamed to lib/builder.js

@@ -34,7 +34,7 @@ const baseConfig = {
     }
 };
 
-class Webpack {
+class Builder {
 
     /**
      * @function createDevConfig
@@ -55,32 +55,32 @@ class Webpack {
         // 设置打包规则
         const devRules = [];
         // 设置图片解析规则
-        devRules.push(Webpack._setImgRule(false));
+        devRules.push(Builder._setImgRule(false));
         // 设置CSS解析规则，开发环境不压缩CSS
-        devRules.push(Webpack._setCssRule(false, options.usePx2rem, options.remUnit, options.remPrecision));
+        devRules.push(Builder._setCssRule(false, options.usePx2rem, options.remUnit, options.remPrecision));
         // 设置JS解析规则
-        devRules.push(Webpack._setJsRule());
+        devRules.push(Builder._setJsRule());
 
         // 设置打包插件
         let devPlugins = [];
         // 设置提取CSS为一个单独的文件的插件
-        devPlugins.push(Webpack._setExtractTextPlugin(false, ''));
+        devPlugins.push(Builder._setExtractTextPlugin(false, ''));
         // React, react-dom 通过cdn引入
-        devPlugins.push(Webpack._setExternalPlugin());
+        devPlugins.push(Builder._setExternalPlugin());
         // 多实例构建
         devPlugins.push(new HappyPack({
             loaders: [ 'babel-loader?presets[]=es2015,presets[]=stage-0,presets[]=react' ]
         }));
         // 多页面打包
-        const { newEntry, htmlWebpackPlugins} = Webpack._setMultiplePage(devConfig.entry, false, options.inject, false, '', '');
+        const { newEntry, htmlWebpackPlugins} = Builder._setMultiplePage(devConfig.entry, false, options.inject, false, '', '');
         devPlugins = devPlugins.concat(htmlWebpackPlugins);
 
         devConfig.entry = newEntry;
-        devConfig.output = Webpack._setOutput(false, '', '/');
+        devConfig.output = Builder._setOutput(false, '', '/');
         devConfig.module.rules = devRules;
         devConfig.plugins = devPlugins;
-        devConfig.devServer = Webpack._setDevServer(options.port || 8001);
-        devConfig.resolve.alias = Webpack._setAlias();
+        devConfig.devServer = Builder._setDevServer(options.port || 8001);
+        devConfig.resolve.alias = Builder._setAlias();
 
         return devConfig;
     }
@@ -116,41 +116,41 @@ class Webpack {
         // 设置打包规则
         const prodRules = [];
         // 设置图片解析规则, 图片需要hash
-        prodRules.push(Webpack._setImgRule(true, assetsPrefix));
+        prodRules.push(Builder._setImgRule(true, assetsPrefix));
         // 设置CSS解析规则，生产环境默认压缩CSS
-        prodRules.push(Webpack._setCssRule(options.minifyCSS || true, options.usePx2rem, options.remUnit, options.remPrecision));
+        prodRules.push(Builder._setCssRule(options.minifyCSS || true, options.usePx2rem, options.remUnit, options.remPrecision));
         // 设置JS解析规则
-        prodRules.push(Webpack._setJsRule());
+        prodRules.push(Builder._setJsRule());
 
         // 设置打包插件
         let prodPlugins = [];
         // 清空Public目录插件
         prodPlugins.push(new CleanWebpackPlugin(['./public']));
         // 设置提取CSS为一个单独的文件的插件
-        prodPlugins.push(Webpack._setExtractTextPlugin(true, assetsPrefix));
+        prodPlugins.push(Builder._setExtractTextPlugin(true, assetsPrefix));
         if (options.minifyJS) {
             // 压缩JS
             prodPlugins.push(new webpack.optimize.UglifyJsPlugin());
         }
         // React, react-dom 通过cdn引入
-        prodPlugins.push(Webpack._setExternalPlugin());
+        prodPlugins.push(Builder._setExternalPlugin());
         // Inline 生成出来的css
         prodPlugins.push(new HtmlWebpackInlineSourcePlugin());
         // 多实例构建
         prodPlugins.push(new HappyPack({
             loaders: [ 'babel-loader?presets[]=es2015,presets[]=stage-0,presets[]=react' ]
         }));
         // 多页面打包, 默认压缩html
-        const { newEntry, htmlWebpackPlugins} = Webpack._setMultiplePage(prodConfig.entry, options.minifyHTML || true, options.inject, false, assetsPrefix, htmlPrefix);
+        const { newEntry, htmlWebpackPlugins} = Builder._setMultiplePage(prodConfig.entry, options.minifyHTML || true, options.inject, false, assetsPrefix, htmlPrefix);
 
         prodPlugins = prodPlugins.concat(htmlWebpackPlugins);
-        prodPlugins.push(Webpack._setOffline(assetsPrefix, htmlPrefix, cdnUrl, serverUrl));
+        prodPlugins.push(Builder._setOffline(assetsPrefix, htmlPrefix, cdnUrl, serverUrl));
 
         prodConfig.entry = newEntry;
-        prodConfig.output = Webpack._setOutput(true, assetsPrefix, cdnUrl + '/');
+        prodConfig.output = Builder._setOutput(true, assetsPrefix, cdnUrl + '/');
         prodConfig.module.rules = prodRules;
         prodConfig.plugins = prodPlugins;
-        prodConfig.resolve.alias = Webpack._setAlias();
+        prodConfig.resolve.alias = Builder._setAlias();
 
         return prodConfig;
     }
@@ -229,7 +229,7 @@ class Webpack {
         const cssLoaderRule = {
             loader: "css-loader",
             options: {
-                alias: Webpack._setAlias()
+                alias: Builder._setAlias()
             }
         };
         if (minimize) {
@@ -443,4 +443,4 @@ class Webpack {
     }
 }
 
-module.exports = Webpack;
+module.exports = Builder;

lib/index.js

@@ -1,9 +1,26 @@
 'use strict';
 
-const Webpack = require('./webpack');
+const webpack = require('webpack');
+const Builder = require('./builder');
 const Config = require('./config');
 
 const builderOptions = Config.getBuildConfig();
+const devConfig = Builder.createDevConfig(builderOptions);
+const prodConfig = Builder.createProdConfig(builderOptions);
 
-exports.devConfig = Webpack.createDevConfig(builderOptions);
-exports.prodConfig = Webpack.createProdConfig(builderOptions);
+exports.devConfig = devConfig;
+exports.prodConfig = prodConfig;
+
+module.exports = (cmd) => {
+  if (cmd === 'dev') {
+    require('./server')(devConfig);
+  } else if (cmd === 'build') {
+    webpack(prodConfig, (err, stats) => {
+      console.log(stats.toString({
+        chunks: false,
+        color: true,
+        children: false
+      }));
+    });
+  }
+}

lib/server.js

@@ -0,0 +1,21 @@
+'use strict';
+
+const express = require('express');
+const webpack = require('webpack');
+const webpackDevMiddleware = require('webpack-dev-middleware');
+const app = express();
+
+module.exports = (devConfig) => {
+  const compiler = webpack(devConfig);
+
+  // Tell express to use the webpack-dev-middleware and use the webpack.config.js
+  // configuration file as a base.
+  app.use(webpackDevMiddleware(compiler, {
+    publicPath: devConfig.output.publicPath
+  }));
+
+  // Serve the files on port.
+  app.listen(devConfig.devServer.port, function () {
+    console.log(`Webpack server listening on port devConfig.devServer.port!\n`);
+  });
+};

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "builder-webpack",
-  "version": "0.1.5",
+  "name": "builder-webpack3",
+  "version": "0.2.0-beta.1",
   "description": "webpack项目构建器.",
   "main": "lib/index.js",
   "scripts": {
@@ -18,8 +18,10 @@
     "feflow"
   ],
   "dependencies": {
+    "autoprefixer-loader": "^3.2.0",
     "caniuse-db": "^1.0.30000764",
     "clean-webpack-plugin": "^0.1.17",
+    "express": "^4.16.2",
     "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^1.1.5",
     "glob": "^7.1.2",
@@ -32,7 +34,6 @@
     "raw-loader": "^0.5.1",
     "sass-loader": "^6.0.6",
     "style-loader": "^0.19.0",
-    "autoprefixer-loader": "^3.2.0",
     "uglify-js": "^2.8.29",
     "webpack": "^3.8.1",
     "zip-webpack-plugin": "^2.1.0"