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

来源：cnblogs　　作者：GodBMW　　时间：2018/10/22 16:23:30　　对本文有异议

作者按：因为教程所示图片使用的是 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"])
  ]
};