webpack4 系列教程(十四):Clean Plugin and Watch Mode
作者按:因為教程所示圖片使用的是 github 倉庫圖片,網速過慢的朋友請移步 ofollow,noindex" target="_blank">《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
。控制檯就會以花花綠綠的形式展示出打包過程,看起來比較酷炫: