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 看到带有 css 扩展名的 import 语句时，它将自动提取该 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 配置入口部分添加 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

运行通常带有 --env.includeCss 而当您不想编译 css 文件时没有 --env.includeCss

Answer 2

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

改用 [contenthash]。

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

If you are using ExtractTextPlugin, you should use [contenthash]. This way the generated assets get invalidated only if their content changes.

ExtractTextWebpackPlugin 总是输出文件，即使没有变化

ExtractTextWebpackPlugin always outputs file, even if there are no changes

css

commonjs

webpack