webpack4 系列教程(十四)：Clean Plugin and Watch Mode

做者按：由於教程所示圖片使用的是 github 倉庫圖片，網速過慢的朋友請移步《webpack4 系列教程(十四)：Clean Plugin and Watch Mode》原文地址。更歡迎來個人小站看更多原創內容：godbmw.com，進行「姿式」交流 ♪(^∇^*)

0. 課程介紹和資料

• >>>本節課源碼
• >>>全部課程源碼

本節課的代碼目錄以下：

本節課用的 plugin 和 loader 的配置文件package.json以下：

{
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.19",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.16.1"
  }
}

1. 什麼是Clean Plugin和Watch Mode？

在實際開發中，因爲需求變化，會常常改動代碼，而後用 webpack 進行打包發佈。因爲改動過多，咱們/dist/目錄中會有不少版本的代碼堆積在一塊兒，亂七八糟。

爲了讓打包目錄更簡潔，這時候須要Clean Plugin，在每次打包前，自動清理/dist/目錄下的文件。

除此以外，藉助 webpack 命令自己的命令參數，能夠開啓Watch Mode：監察你的全部文件,任一文件有所變更,它就會馬上從新自動打包。

2. 編寫入口文件和 js 腳本

入口文件app.js代碼：

console.log("This is entry js");

// ES6
import sum from "./vendor/sum";
console.log("sum(1, 2) = ", sum(1, 2));

// CommonJs
var minus = require("./vendor/minus");
console.log("minus(1, 2) = ", minus(1, 2));

// AMD
require(["./vendor/multi"], function(multi) {
  console.log("multi(1, 2) = ", multi(1, 2));
});

vendor/sum.js:

export default function(a, b) {
  return a + b;
}

vendor/multi.js:

define(function(require, factory) {
  "use strict";
  return function(a, b) {
    return a * b;
  };
});

vendor/minus.js:

module.exports = function(a, b) {
  return a - b;
};

3. 編寫 webpack 配置文件

CleanWebpackPlugin參數傳入數組，其中每一個元素是每次須要清空的文件目錄。

須要注意的是：應該把CleanWebpackPlugin放在plugin配置項的最後一個，由於 webpack 配置是倒序的（最後配置的最早執行）。以保證每次正式打包前，先清空原來遺留的打包文件。

const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");

const path = require("path");

module.exports = {
  entry: {
    app: "./app.js"
  },
  output: {
    publicPath: __dirname + "/dist/", // js引用路徑或者CDN地址
    path: path.resolve(__dirname, "dist"), // 打包文件的輸出目錄
    filename: "[name]-[hash:5].bundle.js",
    chunkFilename: "[name]-[hash:5].chunk.js"
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "./index.html",
      chunks: ["app"]
    }),
    new CleanWebpackPlugin(["dist"])
  ]
};

執行webpack打包，在控制檯會首先輸出一段關於相關文件夾已經清空的的提示，以下圖所示：

4. 開啓Watch Mode

直接在webpack命令後加上--watch參數便可：webpack --watch。

控制檯會提示用戶「開啓 watch」。我改動了一次文件，改動被 webpack 偵聽到，就會自動從新打包。以下圖所示：

若是想看到詳細的打包過程，可使用：webpack -w --progress --display-reasons --color。控制檯就會以花花綠綠的形式展現出打包過程，看起來比較酷炫：