Minifying the Code

最小化處理的簡單做法可以輸入 webpack -p，-p 是 --optimize-minimize 的簡寫，也可以想成 -p 就是給線上環境用的。

當然也可以透過 plugin 去控制更多選項的操作。

Uglify 預設會輸出許多警告訊息，這些訊息可以讓你了解它是怎麼運作的，不過在這裡可以先忽略警告訊息。

跟之前一樣，可以先在 parts.js 定義我們要的 function，最後在指向到 webpack.config.js。

libs/parts.js

...

exports.minify = function() {
  return {
    plugins: [
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings: false
        }
      })
    ]
  };
}

webpack.config.js

...

// Detect how npm is run and branch based on that
switch(process.env.npm_lifecycle_event) {
  case 'build':
    config = merge(
      common,
      {
        devtool: 'source-map'
      },

      parts.minify(),

      parts.setupCSS(PATHS.app)
    );
    break;
  default:
    ...
}

module.exports = validate(config);
}

接著執行 npm run build，可以看到檔案大小已經被壓縮：

[webpack-validator] Config is valid.
Hash: aec016ce2e9d0dfa1577
Version: webpack 1.13.0
Time: 3342ms
     Asset       Size  Chunks             Chunk Names
    app.js      38 kB       0  [emitted]  app
app.js.map     325 kB       0  [emitted]  app
index.html  157 bytes          [emitted]
   [0] ./app/index.js 123 bytes {0} [built]
  [37] ./app/component.js 136 bytes {0} [built]
    + 36 hidden modules
Child html-webpack-plugin for "index.html":
        + 3 hidden modules