Javascript 删除未使用的网页包分块文件

我正在寻找有关如何删除旧网页分块文件的信息。以下是我当前的网页包配置：

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编译该文件的较新版本。然而，旧的一个仍然存在，我希望它被删除的权利

如何删除分块文件的旧版本

有没有一种方法可以让我在手表编译完成后挂接到after回调

有一个用于这些目的的脚本，或者您可以为

npm

编写一个简单的

bash

脚本：

---

请查看此拉取请求：

打开原始文件视图并将其复制到clean webpack插件的index.js。 记住关于config flag->watch:true

这里是插件，它可以做你想要的。在每次编译

webpack

之后，它会搜索所有更新的块并删除过时的文件。

答案 我决定写一个答案，因为其他人——尽管试图直接回答这个问题——忽略了我观点中最重要的部分

最重要的是：你不应该这样做。在开发设置中使用

[hash]

占位符会给其他工具带来很多麻烦（例如symfony插件中phpstorm的路径自动完成）。此外，webpack的增量编译性能较差，因此官方webpack文档（）不推荐使用它

因此，对于未来的读者：只需保持开发配置的简单-将您的

文件名定义为
[name].js
，然后继续

编辑
对于如何处理生产服务器上的旧块文件，似乎存在一种困惑。你什么都不做。一旦部署了一个版本，就永远不应该更改它。您只需在部署时不断创建新版本，并将以前的版本作为备份。为什么?

因为您希望回滚是可靠的，并且要使其成为可能，您的回滚需要非常简单和原子化。如果回滚过程所做的不仅仅是切换符号链接、重新路由到上一个容器（或类似的简单操作），那么您可能会™ 最后会有麻烦的

回滚不是再次“重新部署”应用程序的过程，而是现在重新部署到以前的版本。这是一个“取消”部署的过程。因此，对以前的版本进行
git签出
，然后进行
npm构建——但请快点——我恳求你不要失败
，当你的生产应用程序挂在那里时，完全爆炸不会在这里中断

重建以前版本的应用程序（就像部署一样）可能会由于许多原因而失败。这就是为什么回滚应该切换/重新路由回与已证明有效的版本构建完全相同的版本构建。不一样，100%一样。这就是为什么您需要保留以前的版本，因为这是相同的。“重新生成的”一个在最佳情况下只有
==
是相同的，因此它没有被证明是有效的，只是假设了

而且，再多的CI、登台环境或其他任何东西都不能保证成功部署。正确做法的一部分是为事情出错做好准备。事情会出差错的。希望只是偶尔，但仍然

当然，一旦备份了3、5或
版本，您可能会开始删除最旧的版本，因为您可能不需要超过3个版本。
我通过在
webpack.config.js中添加以下内容解决了这个问题

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

你可以解决这个问题№ 1通过使用

像这样使用此插件：

插件：[
新RemovePlugin({
观察：{
测试：[
{
文件夹：'./js'，
方法：（absPath）=>newregexp（/（.*）-（[^-\\\/]+）\.js/）.test（absPath）
}
]
}
})
]

在“监视”模式下（非正常编译！），它从
/js
文件夹中获取所有文件，并使用正则表达式
/（.*）-（[^-\\/]+）\.js/
测试它们。如果您在理解上有问题，请在（包括单元测试）上分析此正则表达式

注意：我是这个插件的创建者
 适用于Windows用户

“脚本”：{
“构建”：“npm运行清理和网页包--生产模式”，
“清洁”：“del/f/s/q区1>nul”
}
看起来像webpack@5.20.0+具有对此的内置支持。我使用
[chunkhash]
在我的区块文件名中，如果我停止注释动态导入，它们会被清除，如果我取消注释，它们会被添加回来。
自从Webpack 5.20.0以来，你可以使用option
我只需停止服务器，再次运行
Thread serve
作者的意思是如何在使用
哈希
时删除旧的
区块
--watch
cli选项。不幸的是，clean webpack插件与
webpack--watch
一起工作（它将清理一次，之后每次更改时，同一文件的多个版本将开始堆积）；可能是因为它真的不知道哪些块是过时的。谢谢你的B计划-为我节省了数小时的沮丧，因为我尝试不让干净的webpack插件删除东西两次。@klewis你可以使用“webpack clean Observe chunks”删除未使用的块文件，因为某些原因，它对
观看
没有任何作用，只有正确的答案。我认为有些人可能只是对[hash]感到困惑，没有意识到您可以根据您是在开发还是在生产中有条件地使用它们。以及如何清理生产构建中的区块文件？所有旧的区块文件都保留了下来。好吧，prod中的问题似乎比dev中的问题更大。在本地，我可以时不时地删除文件夹而不会有风险。在服务器上，这可能会导致新捆绑正在运行时出现停机和意外行为等generated@mousetail在prod中，这不应该是al的担忧
const { CleanWebpackPlugin } = require('clean-webpack-plugin');    
{
  ... your configs ...
  plugins: [new CleanWebpackPlugin()]
}