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

【问题标题】：ExtractTextWebpackPlugin always outputs file, even if there are no changesExtractTextWebpackPlugin 总是输出文件，即使没有变化
【发布时间】：2017-08-21 17:24:59
【问题描述】：

我有一个使用 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')
],

【问题讨论】：

CSS 包是否在手表上重建？你用的是什么版本的 webpack？另外，每次重建有什么问题？
是的，每次运行watch 时，CSS 文件都会重新构建。我们正在使用 webpack 2.2.1。如果我没有对 CSS 进行任何更改，那么我不想浪费时间构建它（现在运行 watch 时的增量构建时间约为 3-4 秒）。

标签： css webpack commonjs

【解决方案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 文件的 import 语句。 css 文件没有变化

如果你在你的 webpack 配置条目部分添加 css 文件，那么这很容易，因为 webpack 允许自定义命令参数，你可以通过在你的 webpack 配置文件中导出一个 function 来实现这一点 insted 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

【讨论】：

【解决方案2】：

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

改用 [contenthash]。

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

如果您使用的是 ExtractTextPlugin，则应使用 [contenthash]。这样生成的资产只有在其内容发生变化时才会失效。

【讨论】：