Question

我正在寻找有关如何删除旧的webpack chunked文件的信息。这是我当前的webpack配置：

var path = require('path');
var webpack = require('webpack');

module.exports = {
  debug: false,
  outputPathinfo: true,
  displayErrorDetails: true,
  context: __dirname,
  entry: {
    common: ['./src/common.coffee'],
    a: './src/a.cjsx',
    b: './src/b.cjsx'
  },
  output: {
    filename: '[name]-[chunkhash].js',
    chunkFileName: '[name].[chunkhash].js',
    path: path.join(__dirname, 'js')
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin('common', 'common-[chunkhash].js'),
    new webpack.optimize.UglifyJsPlugin({
      compress: { warnings: false }
    })
  ],
  module: {
    preLoaders: [
      {
        test: /\.coffee$/,
        exclude: /node_modules/,
        loader: 'coffeelint-loader'
      }
    ],
    loaders: [
      { test: /\.coffee/, loader: 'coffee' },
      { test: /\.cjsx$/, loaders: ['coffee', 'cjsx'] },
      { test: /\.js$/, loader: 'jsx-loader?harmony' }
    ]
  }
}

如果我正在运行$(npm bin)/webpack --config webpack.js --watch并对a.cjsx进行更改，则会使用新的chunkedhash编译该文件的较新版本。但是，旧版本仍然存在，我希望立即将其删除。

如何删除旧版本的分块文件？
一旦手表完成编译，我有办法挂钩回调吗？

Answer 1

出于这些目的有clean-webpack-plugin，或者您可以为bash编写一个简单的npm脚本：

 "scripts": {
    "build": "rm -r dist/* && webpack -p",
    "clean": "rm -r dist/*"
  }

Answer 2

这是webpack-clean-obsolete-chunks插件，它可以满足您的需求。它会在每次webpack编译后搜索所有更新的块并删除过时的文件。

Answer 3

我之所以决定写一个答案，是因为其他人尽管试图直接回答问题，却忽略了我认为最重要的部分。

最重要的部分是：您不应该这样做。在开发设置中使用[hash]占位符会引起其他工具的麻烦（例如，symfony插件中的phpstorm的路径自动完成功能）。同样，它对于webpack的增量编译性能也不佳，因此不推荐使用官方webpack文档（reference）。

所以对于将来的读者：只需简化开发配置-将filename定义为[name].js并继续。

Answer 4

看看这个拉取请求： https://github.com/johnagan/clean-webpack-plugin/pull/32/files

打开原始文件视图并将其复制到clean webpack插件的index.js。记住配置标志 - ＆gt;看：真的

Answer 5

我通过在下面的webpack.config.js中添加

解决了该问题

const { CleanWebpackPlugin } = require('clean-webpack-plugin');    
{
  ... your configs ...
  plugins: [new CleanWebpackPlugin()]
}

Answer 6

看起来 webpack@5.20.0+ 已内置对此 https://webpack.js.org/configuration/output/#outputclean 的支持。我在块文件名中使用 [chunkhash]，如果我停止注释动态导入，它们就会被清除，如果我取消注释它们，它们会被重新添加。

Answer 7

从 Webpack 5.20.0 开始，您可以使用 output.clean 选项

Answer 8

您可以使用remove-files-webpack-plugin解决问题№1。

像这样使用此插件：

plugins: [
  new RemovePlugin({
    watch: {
      test: [
        {
          folder: './js',
          method: (absPath) => new RegExp(/(.*)-([^-\\\/]+)\.js/).test(absPath)
        }
      ]
    }
  })
]

在“监视”模式下（不是正常编译！），它会抓取./js文件夹中的所有文件，并使用此正则表达式/(.*)-([^-\\\/]+)\.js/对其进行测试。如果您对理解有疑问，请在regex101上分析此正则表达式（包括单元测试）。

注意：我是此插件的创建者。

Answer 9

Windows 用户

  "scripts": {
    "build": "npm run clean && webpack --mode production",
    "clean": "del /f /s /q dist 1>nul"
  }

Answer 10

我只需要停止我的服务器并再次运行 yarn serve

删除未使用的webpack分块文件

10 个答案: