在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版本4.还没有机会在webpack版本4上工作.但是根据评论,它不起作用,因为contenthash是webpack 4中的保留字.

见:

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

Answer 2

你需要这个webpack-md5-hash插件。

https://github.com/erm0l0v/webpack-md5-hash

npm install --save-dev webpack-md5-hash

在您的 Webpack 配置中添加插件：

const WebpackMd5Hash = require('webpack-md5-hash');

module.exports = {
  plugins: [
    new WebpackMd5Hash()
  ]
};