Webpackのファイル指紋はどのように生成します

·

Hash:プロジェクト全体の構築に関連して、プロジェクトファイルが変更されている限り、プロジェクト全体の構築のhash値は

に変更されます.

Chunkhash(JSファイル):webpackパッケージのchunkに関連して、異なるentryは異なるchunkhash値

を生成します.

Contenthash(CSSファイル):ファイルの内容に基づいてhashを定義し、ファイルの内容が変わらなければcontenthashは

変わらない.

ピクチャのファイル指紋設定[hash]

MiniCssExtratPluginのfilenameを設定し、[contenthash]を使用MiniCssExtratPluginを使用しない場合は通常style-loadまたはcss-loadを使用するとスタイル抽出がheaderのstyleに入れられ、独立したファイルがないため、MiniCssExtratPluginを使用して独立したファイルに抽出されます

plugins: [
new MiniCssExtractPlugin({
	filename: `[name]_[contenthash:8].css`
})
]

module.exports = {
  entry: {
    index: './src/index.js',
    search: './src/search.js'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name]_[chunkhash:8].js' // chunkhash:8  MD5 8 
  },
  module: {
    rules: [
     {
        test: /\.(png|svg|jpg|gif|jpeg)$/,
        use: [{
            loader: 'file-loader',
            options: {
              name: 'img/[name][hash:8].[ext]',
            }
          }]
      },
  ]
}