feat: 增加输出文件分析报表功能，借助报表能优化打包结果

CHANGELOG.md

@@ -12,16 +12,6 @@ All notable changes to this project will be documented in this file. See [standa
 
 
 
-<a name="3.0.0"></a>
-# [3.0.0](https://github.com/packingjs/packing/compare/v3.0.0-beta.5...v3.0.0) (2018-04-18)
-
-
-### Features
-
-* 内置 `postcss.config.js` 配置文件 ([c5450be](https://github.com/packingjs/packing/commit/c5450be))
-
-
-
 <a name="3.0.0-beta.5"></a>
 # [3.0.0-beta.5](https://github.com/packingjs/packing/compare/v3.0.0-beta.4...v3.0.0-beta.5) (2018-04-17)
 

package.json

@@ -54,6 +54,7 @@
     "loader-utils": "^1.1.0",
     "mini-css-extract-plugin": "^0.4.0",
     "mkdirp": "^0.5.1",
+    "open": "0.0.5",
     "packing-glob": "^1.0.1",
     "packing-template-util": "^1.1.1",
     "postcss-loader": "^2.1.4",
@@ -65,7 +66,8 @@
     "toposort": "^1.0.6",
     "url-loader": "^1.0.1",
     "webpack": "^4.5.0",
-    "webpack-pwa-manifest": "^3.6.2"
+    "webpack-pwa-manifest": "^3.6.2",
+    "webpack-visualizer-plugin": "^0.1.11"
   },
   "devDependencies": {
     "apollo-server-express": "^1.3.2",

src/bin/packing-build.js

@@ -1,26 +1,55 @@
 #!/usr/bin/env node
 
+import { resolve } from 'path';
 import { red, yellow } from 'chalk';
+import open from 'open';
 import webpack from 'webpack';
+import program from 'commander';
 import '../bootstrap';
-import { pRequire } from '..';
+import { pRequire, getContext } from '..';
 
+program
+  .option('-o, --open', 'open webpack visualizer report')
+  .parse(process.argv);
+
+const context = getContext();
 const appConfig = pRequire('config/packing');
 const webpackConfig = pRequire('config/webpack.build.babel', {}, appConfig);
 
+const {
+  path: {
+    dist: {
+      root: distRoot
+    }
+  },
+  visualizer: {
+    enable: visualizerEnable,
+    options: visualizerOptions
+  }
+} = appConfig;
+
 webpack(webpackConfig, (err, stats) => {
   if (err) {
     console.log(err);
   } else if (stats.hasErrors()) {
-    const message = red(`[错误]: 💔 Webpack 打包失败。\n${stats.compilation.errors}`);
+    const message = red(`[build]: 💔 Webpack 打包失败。\n${stats.compilation.errors}`);
     console.log(message);
     // 让 jenkins 终止编译
     process.exit(1);
   } else if (stats.hasWarnings()) {
-    const message = yellow(`[警告]: ⚠️ Webpack 打包成功，请关注以下信息：\n${stats.compilation.warnings}`);
+    const message = yellow(`[build]: ⚠️ Webpack 打包成功，请关注以下信息：\n${stats.compilation.warnings}`);
     console.log(yellow(message));
   } else {
     console.log(stats.toString(stats));
-    console.log('[成功]:💚 Webpack 打包成功。');
+    console.log('[build]:💚 Webpack 打包成功。');
+
+    if (visualizerEnable) {
+      const file = resolve(context, distRoot, 'stats.html');
+      const message = `[webpack-visualizer-plugin]: 模块报表已经生成，该报表可以指导优化输出文件体积\n请运行 open file://${file} 查看报表`;
+      console.log(message);
+      if (program.open || visualizerOptions.open) {
+        open(`file://${file}`);
+      }
+    }
   }
 });

src/config/packing.js

@@ -388,6 +388,30 @@ export default {
     // ]
   },
 
+  /**
+   * webpack-visualizer-plugin 配置
+   * @see https://github.com/chrisbateman/webpack-visualizer
+   */
+  visualizer: {
+    /**
+     * 是否启用 webpack-visualizer-plugin
+     * @type {bool}
+     */
+    enable: true,
+
+    /**
+     * `visualizer` 配置项
+     * @type {object}
+     */
+    options: {
+      /**
+       * 编译成功是否在浏览器中打开报表网页
+       * @type {object}
+       */
+      open: true
+    }
+  },
+
   /** graphql 配置 */
   graphql: {
     /**