iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 7
0
Modern Web

使用 webpack 模組化你的程式碼,讓人生更美好。系列 第 7

<07 - 心法4 - 無所不能> Plugins - 示範內建的 webpack.optimize.UglifyJsPlugin

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

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

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

該來動手做囉,做網站開發,一定要捲起袖子啊/images/emoticon/emoticon31.gif

撰寫 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 就會看到都整個壓縮成一行了。/images/emoticon/emoticon58.gif


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

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


上一篇
<06 - 心法3 - 強化> Loaders - 示範 css-loader 與 style-loader
下一篇
<08 - 溫故知新> 階段複習過去七天所瞭解的 webpack
系列文
使用 webpack 模組化你的程式碼,讓人生更美好。30

尚未有邦友留言

立即登入留言