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允许自定义命令参数，您可以通过导出function到object中的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。这样，生成的资产只有在其内容发生变化时才会失效。