clean-webpack-plugin v 3.0.0

用于删除/清理构建文件夹的 webpack 插件。

注意:经测试支持 Node v8+ 和 webpack v3+。

关于

默认情况下，这个插件会删除webpack的output.path中的所有文件，以及每次成功重新构建后所有未使用的资源。

安装

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

使用

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

const webpackConfig = {
    plugins: [
        /**
         * webpack output.path 目录中的所有文件将被删除一次，但目录本身不会被删除。
         * 如果使用 webpack 4+ 的默认配置，<PROJECT_DIR>/dist/下的所有内容都将被删除。
         * 使用 cleanOnceBeforeBuildPatterns 可以覆盖这个行为。
         * 
         * 在重新构建期间，所有不再使用的 webpack 资源将被自动删除。
         * 
         * 参见下文的 配置项和默认值
         */
        new CleanWebpackPlugin(),
    ],
};

module.exports = webpackConfig;

配置项和默认值

new CleanWebpackPlugin({
    // 模拟文件的删除
    //
    // default: false
    dry: true,

    // 将日志写入控制台
    // (当 dry 的值为 true时，总是启用)
    //
    // default: false
    verbose: true,

    // 重新构建时自动删除所有未使用的 webpack 资源
    //
    // default: true
    cleanStaleWebpackAssets: false,

    // 不允许移除当前 webpack 资源。
    //
    // default: true
    protectWebpackAssets: false,

    // **警告⚠️**
    //
    // 对于下面的这些配置项：
    //
    // 它们并不安全...因此首先用 dry: true 测试着。
    //
    // 
    // 相对于 webpack 的 output.path 目录。
    // 
    // 如果在 webpack 的 output.path 目录之外，请使用完整路径。
    // path.join(process.cwd(), 'build/**/*')
    //
    // 这些配置项扩展了 del 模式的匹配 API。
    // 
    // 参见 https://github.com/sindresorhus/del#patterns 了解通配符匹配规整
    // 
    //
    // 在 Webpack 编译之前删除文件一次
    //   重新构建不包括在内(watch 模式)
    //
    // 使用 ! 通配符来排除文件
    // 
    //
    // default: ['**/*']
    cleanOnceBeforeBuildPatterns: ['**/*', '!static-files*'],
    cleanOnceBeforeBuildPatterns: [], // 禁用 cleanOnceBeforeBuildPatterns

    // 在每次生成(包括 watch 模式)后删除与此模式匹配的文件。
    // 应用于不直接由 Webpack 创建的文件。
    //
    // 使用 ! 通配符来排除文件
    //
    // default: []
    cleanAfterEveryBuildPatterns: ['static*.*', '!static1.js'],

    // Allow clean patterns outside of process.cwd()
    // 允许清除 process.cwd() 之外的通配符。
    //
    // 需要显式设置 dry 配置项
    //
    // default: false
    dangerouslyAllowCleanPatternsOutsideProject: true,
});

Webpack配置示例

这是WebPack插件文档的修改版本，其中包含了 Clean 插件。

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

module.exports = {
    entry: './path/to/my/entry/file.js',
    output: {
        /**
         * 若是不作任何配置，clean-webpack-plugin 将删除下面目录里面的文件。
         */
        path: path.resolve(process.cwd(), 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                loader: 'babel-loader',
            },
        ],
    },
    plugins: [
        new webpack.ProgressPlugin(),
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({ template: './src/index.html' }),
    ],
};