webpackのCSSとjsファイルの両方でchunkhashを更新する

Question

私はExtractTextPluginを使ってCssファイルを抽出しましたが、出力にJSファイルしかありませんでした。名前にチャンクがあります。私の問題は新しいチャンクハッシュJSに変更が加えられたときにのみ作成され、CSSには作成されません。私は、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をファイルには、webpack-md5-hashプラグインを必要とする他の変数は

Answer 1

定義されているだけで、別のファイルです。

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

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

あなたのWebPACKの設定でプラグインを追加します。代わりにchunkhashの

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

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

Answer 2

使用contenthashでExtractTextPlugin設定を。

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

を参照してください：

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