webpack 自动清理和 watch-mode 配置

作者：Seiya

时间：2019年07月12日

前言

在实际开发中，由于需求变化，会经常改动代码，然后用 webpack 进行打包发布。为了让打包目录更简洁，需要 Clean Plugin，在每次打包前，自动清理 dist 目录下的文件。

除此之外，借助 webpack 命令本身的命令参数 --Watch Mode 监察你的所有文件,任一文件有所变动,立刻重新自动打包。

自动清理 dist 目录

首先为了实现自动清理功能，我们需要借助一下插件：

clean-webpack-plugin：移除所有 webpack output.path 配置文件夹下的所有文件

然后，我们拿第一批笔记中的 demo 案例进行演示，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/",
    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 目录中的所有文件。

开启 Watch Mode

直接在 webpack 命令后加上--watch参数即可：webpack --watch。控制台会提示用户“开启 watch”。我改动了一次文件，改动被 webpack 侦听到，就会自动重新打包。

如果想看到详细的打包过程，可以使用：webpack -w --progress --display-reasons --color。控制台就会以花花绿绿的形式展示出打包过程。

我们也可以通过配置文件开启 watch mode，如下所示：

module.export = {
  /* 开启 watch mode */
  watch: true,                  // 默认 false

  /* 只有开启监听模式时，watchOptions 才有意义 */
  watchOptions: {
    /* 不监听的文件或文件夹，支持正则匹配 */
    ignored: /node_modules/,    // 默认为空

    /* 监听“到变化发生”后 300ms 再去执行 */
    aggregateTimeout: 300,      // 默认 300ms

    /* 判断文件是否发生变化，是通过不停询问系统指定文件有没有发生变化实现的，默认每秒访问1000次 */
    poll: 1000                  // 默认 1000
  }
}

文件监听原理

webpack 会轮询判断文件的最后编辑时间是否发生变化。当某个文件发生变化时，并不会立刻告诉监听者，而是先缓存起来，等待 aggregateTimeout。

# webpack 自动清理和 watch-mode 配置

# 前言

# 自动清理 dist 目录

# 开启 Watch Mode

# 文件监听原理

webpack 自动清理和 watch-mode 配置

前言

自动清理 dist 目录

开启 Watch Mode

文件监听原理