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

godbmw發表於2018-10-21
WebPlugin

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

0. 課程介紹和資料

本節課的程式碼目錄如下：

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

本節課用的 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打包，在控制檯會首先輸出一段關於相關資料夾已經清空的的提示，如下圖所示：

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

4. 開啟Watch Mode

直接在webpack命令後加上--watch引數即可：webpack --watch。

控制檯會提示使用者“開啟 watch”。我改動了一次檔案，改動被 webpack 偵聽到，就會自動重新打包。如下圖所示：

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

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

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

相關文章