ExtractTextWebpackPlugin 始终输出文件，即使没有更改

Question

我有一个使用 Webpack 捆绑客户端文件的项目。我们使用 ExtractTextWebpackPlugin 捆绑 CSS。问题是当我编辑一个javascript文件时，尽管CSS状态绝对没有变化，但CSS包总是被重新构建。

如何捆绑 CSS，但仅在 CSS 文件发生更改时？

从我的 webpack 配置中提取：

{
test: /.css$/,
use: ExtractTextPlugin.extract({
use: 'css-loader'
})
},

。

plugins: [
new ExtractTextPlugin(isDebug ? '[name].css' : '[name].[chunkhash].css')
],

Answer 1

每当ExtractTextPlugin看到扩展名cssimport语句时，它都会自动提取该css文件的文本连接，无论它是否更改

如果您使用它进行调试，请使用style-loader和HMR(Hot Module Replacement)以获得更好的体验，如下所示

isDebug
? {
test: /.css$/,
use: ["style-loader", "css-loader"]
}
: {
test: /.css$/,
use: ExtractTextPlugin.extract({
use: "css-loader"
})
}

如果您想使用当前的配置并且不希望ExtractTextPlugin构建 CSS 文件并且您正在使用import将它们导入您的 JavaScript 文件中，那么当该css文件中没有更改时，您必须以某种方式删除 CSS 文件的import语句

如果你在你的 webpack config 条目部分添加 CSS 文件，那么这将很容易，因为 webpack 允许自定义命令参数，你可以通过在 webpack 配置文件中导出一个function而不是object来做到这一点

。

//webpack.config.js
module.exports = function(env) {
return {
entry: {
main: env.includeCss 
? 
["./src/index.js", "./src/main.css"]  //build with css
: ["./src/index.js"] //build without css
},
.
.
.
.
}
}

你可以像这样通过命令参数传递env.includeCss。

webpack --config ./webpack.config.prod.js --env.includeCss
//notice --env.includeCss witch will set env.includeCss as true

当您不想编译 CSS 文件时，正常运行--env.includeCss且无需--env.includeCss

Answer 2

与您的问题没有直接关系，但我注意到您使用[chunkhash]提取 CSS。即使您没有更改 CSS 文件中的内容，这也会使您的 css 名称发生变化。

请改用 [contenthash]。

https://survivejs.com/webpack/optimizing/adding-hashes-to-filenames/#setting-up-hashing

如果您使用的是 ExtractTextPlugin，则应使用 [contenthash]。这样，生成的资产仅在其内容更改时失效。