javascript - 在 webpack 的 css 和 js 文件中更新 chunkhash

Question

我在输出中只有 JS 文件，而我使用 ExtractTextPlugin 提取 Css 文件。它们的名称中都有 chunkhash。我的问题是只有在对 JS 进行更改时才会创建新的 chunkhash 并且不是CSS。我也想要新的 chunkhash 来更改 Css 文件。在我的 webpack.config.js 文件中。

var webpack = require("webpack");
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");


module.exports = {
plugins: [new HtmlWebpackPlugin(), 
          new ExtractTextPlugin("styles.[chunkhash].css")
          ],

entry: {
    main: './src/main1.js',
},


output: {
 path: __dirname + "/dist", // or path: path.join(__dirname, 
"dist/js"),
 filename: "[name].[chunkhash].js"
},


module : {
    loaders: [
      {
        test: /\.js$/,    
        exclude: /(node_modules)/,  
        loader: 'babel-loader',  
        query:{
            presets:['es2015']  
        }
      },

      {
        test: /\.scss$/,
        loader: 'style-loader!css-loader!sass-loader',
      },

      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
       }
     ]
}

};

这是 main.js 文件

var msgs = require('./main2');

require('./css/css1.css');

main2.js 只是另一个定义了另一个变量的文件

Answer 1

在 ExtractTextPlugin 配置中使用 contenthash 而不是 chunkhash。

new ExtractTextPlugin({
    filename: "css/app.[contenthash].css",
    allChunks: true
}),

更新 1:

• 不确定这是否适用于 webpack version 4。到目前为止还没有机会在 webpack 版本 4 上工作。但根据评论，它不起作用，因为 contenthash 是 webpack 4 中的保留字。

参见:

• https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/49
• Difference b/w contenthash, hash and chunkhash