為什麼說 plugins 無所不能呢？因為你可以自行開發 Plugins，雖然 Loaders 也可以自行開發，但 Plugins 就是為了來擴充 Loaders 所無法達成的事情而誕生的。

雖然目前我還沒有想到什麼狀況會需要自行開發 Plugins，所以以下會先簡單介紹一下如何使用自行開發的一個 Plugin：單純在執行 webpack 指令時，在 terminal 上印出訊息。

也會介紹一個內建的 webpack.optimize.UglifyJsPlugin()，來將模組化後的程式碼都壓縮成一行，以減少檔案的大小，加速頁面載入，算是一種效能的提昇。

該來動手做囉，做網站開發，一定要捲起袖子啊

撰寫 Plugin

在專案資料夾下，建立 ./webpack_plugins/ConsoleLogOnBuildWebpackPlugin.js，內容如下：

function ConsoleLogOnBuildWebpackPlugin() {
};

ConsoleLogOnBuildWebpackPlugin.prototype.apply = function(compiler) {
  compiler.plugin('run', function(compiler, callback) {
    console.log("The webpack build process is starting!!!");
    callback();
  });
};

module.exports = ConsoleLogOnBuildWebpackPlugin;

然後在 webpack.config.js 中，更新如下，主要是第一行，和新增 plugins 屬性：

const ConsolePlugin = require('./webpack_plugins/ConsoleLogOnBuildWebpackPlugin');

module.exports = {
  entry: {
    …
  },
  output: {
    …
  },
  module: {
    …
  },
  plugins: [
    new ConsolePlugin()
  ]
}

這個時候，再執行 webpack 指令，會看到 The webpack build process is starting!!! 的輸出：

$ webpack
The webpack build process is starting!!!
Hash: e4da1e8e3aebfa36d706
Version: webpack 2.1.0-beta.27
Time: 1180ms
     Asset     Size  Chunks             Chunk Names
    app.js  12.7 kB       0  [emitted]  app
vendors.js   543 kB       1  [emitted]  vendors
   [7] ./app/index.js 261 bytes {0} [built]
   [8] ./app/vendors.js 24 bytes {1} [built]
    + 7 hidden modules

以上就是很簡單的自訂 Plugin 的基本架構。其實 webpack 本身也有內建 Plugin，讓我們來看一下一個很常用的：也就是將程式碼壓成一行。

webpack.optimize.UglifyJsPlugin

這是一個 webpack 本身內建的 Plugin，目的很單純，就是將模組化好的程式，直接整個壓成一行，而且只要在設定檔 webpack.config.js 中設定即可，更新 webpack.config.js：

附上完整的內容，主要是新增兩行： const webpack = require('webpack'); 及 new webpack.optimize.UglifyJsPlugin(),

const webpack = require('webpack'); //to access built-in plugins
const ConsolePlugin = require('./webpack_plugins/ConsoleLogOnBuildWebpackPlugin');

module.exports = {
  //devtool: "source-map",
  entry: {
    app: './app/index.js',
    vendors: './app/vendors.js'
  },
  output: {
    filename: '[name].js',
    path: './dist',
    //path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader'},
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new ConsolePlugin()
  ]
}

再執行 webpack 指令就大功告成囉，開啟 ./dist/app.js、./dist/vendors.js 就會看到都整個壓縮成一行了。

太棒了，其實這幾天下來，相信大家對 webpack 已經有了基礎的認識了，明天，我會先總結一下目前所撰寫的部份，做個簡單的複習，同時也會複上程式碼，供大家下載喔。

同時後續也會撰寫更多與 webpack 相關的應用，持續邁進。