七、清理 /dist 文件夹 (管理输出)

在我们构建项目的过程中，打包后 dist 目录可能会有一些遗留下来的文件，但是 当前实际并没有使用。所以，通常在每次构建前清理 /dist 文件夹，是比较推荐的做法。
clean-webpack-plugin 是一个比较普及的管理插件。

1. 安装

yarn add clean-webpack-plugin --dev

2. 使用

webpack.config.js

// webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入 clean-webpack-plugin
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  entry: {
    app: './src/index.js',
    print: './src/print.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: '管理输出'
    }),
    // 使用 CleanWebpackPlugin
    new CleanWebpackPlugin(['dist'])
  ]
}

3. 运行结果

$ yarn run build
yarn run v1.9.4
$ webpack --config webpack.config.js
clean-webpack-plugin: E:\learning\webpack_demo\demo7\dist has been removed.
Hash: fb4a34e35242be5e48b4
Version: webpack 4.25.1
Time: 6099ms
Built at: 2018-11-11 18:19:06
          Asset       Size  Chunks             Chunk Names
  app.bundle.js   70.7 KiB    0, 1  [emitted]  app
     index.html  241 bytes          [emitted]
print.bundle.js   1.02 KiB       1  [emitted]  print
Entrypoint app = app.bundle.js
Entrypoint print = print.bundle.js
[0] ./src/print.js 87 bytes {0} {1} [built]
[2] ./src/index.js 416 bytes {0} [built]
[3] (webpack)/buildin/global.js 489 bytes {0} [built]
[4] (webpack)/buildin/module.js 497 bytes {0} [built]
    + 1 hidden module

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [2] (webpack)/buildin/global.js 489 bytes {0} [built]
    [3] (webpack)/buildin/module.js 497 bytes {0} [built]
        + 2 hidden modules
Done in 9.29s.

我们可以看到它是先清除了 dist 目录，然后再新建并打包到 dist 目录下。