代码之家  ›  专栏  ›  技术社区  ›  Melchia

CleanWebpack插件无法在Webpack 5中进行清理

  •  0
  • Melchia  · 技术社区  · 4 年前

    我使用的是最新版本的webpack 5.3.2,带有“干净的webpack插件”:“^3.0.0”。显然,在我构建时,该插件不会清理dist文件夹。

    以下是我的webpack信息:

      Binaries:
        Node: 12.18.1 - ~/.nvm/versions/node/v12.18.1/bin/node
        Yarn: 1.22.4 - ~/.nvm/versions/node/v12.18.1/bin/yarn
        npm: 6.14.8 - ~/.nvm/versions/node/v12.18.1/bin/npm
      Browsers:
        Chrome: 86.0.4240.111
        Firefox: 82.0
      Packages:
        clean-webpack-plugin: ^3.0.0 => 3.0.0 
        copy-webpack-plugin: ^6.2.1 => 6.2.1 
        terser-webpack-plugin: ^5.0.3 => 5.0.3 
        webpack: ^5.3.2 => 5.3.2 
        webpack-cli: ^4.1.0 => 4.1.0 
      Global Packages:
        webpack-cli: 4.1.0
        webpack: 5.3.2
    
    

    这是我的webpack配置:

    const path = require('path');
    const webpack = require('webpack');
    const { CleanWebpackPlugin } = require('clean-webpack-plugin');
    const CopyPlugin = require('copy-webpack-plugin');
    
    module.exports = {
      mode: 'development',
      entry: './src/index.ts',
      plugins: [
        new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: [path.join(__dirname, 'dist/**/*')]
    }),
        new webpack.ProgressPlugin(),
        new CopyPlugin({
          patterns: [
            { from: 'src', to: 'src' },
            { from: 'package.json' },
            { from: 'README.md' }
          ],
        }),
      ],
      output: {
        filename: 'utils.min.js'
      },
      module: {
        rules: [
          {
            test: /\.(ts|tsx)$/,
            loader: 'ts-loader',
            include: [path.resolve(__dirname, 'src')],
            exclude: [/node_modules/]
          },
          {
            test: /\.m?js$/,
            exclude: [/node_modules/],
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env']
              }
            }
          }]
      },
    
      resolve: {
        extensions: ['.tsx', '.ts', '.js']
      }
    }
    

    即使我启用了verbose选项,我也看不到日志,插件也不会清理。

    0 回复  |  直到 2 年前
        1
  •  57
  •   Sebastiandg7    4 年前

    从webpack v5中,您可以删除 clean-webpack-plugin 插件并在webpack配置中使用output.clean选项:

     output: {
        filename: 'utils.min.js',
        clean: true,
     }
    
        2
  •  8
  •   Melchia    4 年前

    显然,当你指定一个option.output(在我的例子中是定制输出包名称)时 clean-webpack-plugin 还需要您指定路径 否则,插件将被禁用,不会出现任何错误!:

      output: {
        filename: 'utils.min.js',
        path: path.resolve(__dirname, 'dist')
      },