Webpack 清空 Output 输出目录

随着我们项目的进展，deploy 文件夹可能会变得非常混乱。 在每次构建时，webpack 都会生成包并将它们放在 deploy 文件夹中，但它不会跟踪您的项目实际使用了哪些文件。 所以在每次构建之前清理部署文件夹是一个很好的做法，这样只会生成正在使用的文件。 为此，我们需要安装和配置 clean-webpack-plugin：

$ npm install clean-webpack-plugin --save-dev

在 webpack.config.js 中添加如下内容

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

...

plugins: [
  ...
  new CleanWebpackPlugin()
],

到目前为止，完整的webpack配置文件内容如下

webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: {
        main: path.resolve(__dirname, './src/app.js'),
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'deploy')
    },
    devServer: {
        static: './deploy',
        open: true
    },
    module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env']
              }
            }
          },
          { 
            test: /\.css$/, 
            use: ["style-loader", "css-loader"] 
          },
          { 
            test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
            type: 'asset/resource',
          },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Webpack - 迹忆客(jiyik.com)',
        }),
        new CleanWebpackPlugin()
    ],
};

现在，运行 webpack (npm run build) 并检查 deploy 文件夹。 您现在应该只看到从构建生成的文件，而没有旧的和未使用的文件。 要测试它，请创建一个项目中未使用的简单文本文件，然后再次运行构建脚本。 编译后文件将被删除。

这里我们不再进行演示。过程和前面章节中的完全一样。