javascript 删除未使用的 webpack 分块文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31735584/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Delete unused webpack chunked files
提问by Jey Balachandran
I'm looking for information on how to delete old webpack chunked files. Here is my current webpack configuration:
我正在寻找有关如何删除旧的 webpack 分块文件的信息。这是我当前的 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' }
]
}
}
If I am running $(npm bin)/webpack --config webpack.js --watchand make changes to a.cjsx, it compiles a newer version of that file with a new chunkedhash. However, the old one remains and I'd like it to be deleted right away.
如果我正在运行$(npm bin)/webpack --config webpack.js --watch并对其进行更改a.cjsx，它会使用新的 chunkedhash 编译该文件的较新版本。但是，旧的仍然存在，我希望立即将其删除。
- How can I delete the old version of the chunked file?
- Is there a way for me to hook into an after callback once watch finishes compiling?
- 如何删除旧版本的分块文件？
- 一旦手表完成编译，有没有办法让我挂钩后回调？
回答by arturkin
There is a clean-webpack-pluginfor those purposes, or you can write a simple bashscript for npm:
有一个用于这些目的的clean-webpack-plugin，或者您可以为以下内容编写一个简单的bash脚本npm：
"scripts": {
"build": "rm -r dist/* && webpack -p",
"clean": "rm -r dist/*"
}
回答by GProst
Here is the webpack-clean-obsolete-chunksplugin, which do what you want. It searches for all updated chunks and deletes obsolete files after each webpackcompilation.
这是webpack-clean-obsolete-chunks插件，它可以做你想做的事。它在每次webpack编译后搜索所有更新的块并删除过时的文件。
回答by plunntic iam
The answer
答案
I've decided to write an answer because others - although trying to answer the question directly - overlooked the most important part in my opinion.
我决定写一个答案，因为其他人 - 尽管试图直接回答这个问题 - 忽略了我认为最重要的部分。
And the most important part is: you shouldn't be doing it this way. Using [hash]placeholders in your development setup cause many headaches with other tooling (phpstorm's path autocomplete in symfony plugin for example). Also it's poor for webpack's incremental compilation performance and thus is not recommended by official webpack docs (reference).
最重要的部分是：你不应该这样做。[hash]在开发设置中使用占位符会给其他工具带来很多麻烦（例如 symfony 插件中的 phpstorm 路径自动完成）。此外，它对于 webpack 的增量编译性能也很差，因此官方 webpack 文档（参考）不推荐。
So for future readers: just keep it simple for development config - define your filenameas [name].jsand move on.
所以对于未来的读者：只需保持简单的开发配置 - 定义你的filenameas[name].js并继续。
Edit
编辑
There seems to be a confusion about what to do with the old chunk-files on the production server. Well, you don't do anything. Once a version is deployed it shouldn't be ever changed. You just keep creating new versions when deploying and keep previous as a backup. Why?
关于如何处理生产服务器上的旧块文件似乎存在混淆。好吧，你什么都不做。一旦部署了版本，就不应再更改它。您只需在部署时不断创建新版本并保留以前的版本作为备份。为什么？
Because you want you're rollback to be reliable and for it to be possible your rollback needs to be extremely simple and atomic. If your rollback procedure is doing anything more than switching a symlink, rerouting to previous container (or similar simple operation) you're probably? going to end up in trouble.
因为您希望回滚是可靠的，并且要使其成为可能，您的回滚需要非常简单和原子化。如果您的回滚过程所做的不仅仅是切换符号链接、重新路由到以前的容器（或类似的简单操作），您可能是？最终会陷入困境。
Rollback isn't a process of "re-deploying" the application again, but now to the previous version. It's a process of "un-doing" the deployment. So doing a git checkoutto the previous version followed by a npm build --but-please-be-hurry --and-im-begging-you-dont-failwhile your production app is hanging there, completely exploded doesn't cut here.
回滚不是再次“重新部署”应用程序的过程，而是现在到以前的版本。这是一个“取消”部署的过程。所以git checkout对以前的版本做一个，然后npm build --but-please-be-hurry --and-im-begging-you-dont-fail你的生产应用程序挂在那里，完全爆炸不会在这里切断。
Rebuilding a previous version of the application - just like the deployment - may fail for many reasons. That's why a rollback should be switching/rerouting back to the exact same version-build that is proven to be working. Not ==-the-same, 100% ===-the-same. That's why you need to keep your previous version around, because that's the ===-same. A "regenerated" one is - in best case scenario - only ==-the-same, and so it is not proven to be working, only assumed.
重建应用程序的先前版本 - 就像部署一样 - 可能由于多种原因而失败。这就是为什么回滚应该切换/重新路由回被证明有效的完全相同的版本构建。不==一样，100%===一样。这就是为什么您需要保留以前的版本，因为这是===相同的。“再生”一个 - 在最好的情况下 - 只有==- 相同，因此它没有被证明是有效的，只是假设。
And no, no amount of CI, staging environments or whatever will give you a guaranteed successful deployment. Part of doing it the right way is to be prepared for when things go wrong. And things willgo wrong. Hopefully only from time to time, but still.
不，再多的 CI、暂存环境或其他任何东西都不能保证成功部署。以正确的方式做这件事的一部分是为出现问题时做好准备。事情会出错。希望只是不时，但仍然。
Of course once you have 3, 5 or <put-your-number-here>versions backed up you may start to remove the oldest ones as you probably won't ever need more than 3.
当然，一旦您<put-your-number-here>备份了3、5 或版本，您就可以开始删除最旧的版本，因为您可能永远不需要超过 3 个。
回答by Arek - Krakiewicz.pl
Take a look at this pull request: https://github.com/johnagan/clean-webpack-plugin/pull/32/files
看看这个拉取请求：https: //github.com/johnagan/clean-webpack-plugin/pull/32/files
Open raw file view and copy it to index.js of clean webpack plugin. Remember about config flag -> watch: true
打开原始文件视图并将其复制到干净的 webpack 插件的 index.js。记住配置标志 -> watch: true
回答by Mark Hong
I have solved that problem by adding below in webpack.config.js
我通过在下面添加解决了这个问题 webpack.config.js
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
{
... your configs ...
plugins: [new CleanWebpackPlugin()]
}
回答by Immersion
You can solve the problem № 1 by using remove-files-webpack-plugin.
您可以使用remove-files-webpack-plugin解决问题 № 1 。
Use this plugin like this:
像这样使用这个插件：
plugins: [
new RemovePlugin({
watch: {
test: [
{
folder: './js',
method: (absPath) => new RegExp(/(.*)-([^-\\/]+)\.js/).test(absPath)
}
]
}
})
]
In "watch" mode (not normal compilation!) it grabs all files from ./jsfolder and tests them with this regular expression /(.*)-([^-\\\/]+)\.js/. Analyze this regular expression on regex101(unit tests are included) if you have problems with understanding.
在“观察”模式下（不是正常编译！）它从./js文件夹中抓取所有文件并用这个正则表达式测试它们/(.*)-([^-\\\/]+)\.js/。如果您在理解上有问题，请在regex101（包括单元测试）上分析此正则表达式。
Note: i'm the creator of this plugin.
注意：我是这个插件的创建者。
