Webpack - 最新の[ハッシュ]バンドルを含むようにHTMLを更新する最良の方法

Question

ハッシュバンドルファイル名を生成するためにwebpackを使用しています。

私は静的なHTMLを使用していると仮定して、& JS、最新のバンドルを指すように自動的にindex.htmlを更新する最良の方法は何ですか？例えば

、

更新：

<script src="e8e839c3a189c25de178.app.js"></script> 
<script src="c353591725524074032b.vendor.js"></script> 

に自動的

<script src="d6cba2f2e2fb3f9d98aa.app.js"></script> 
<script src="c353591725524074032b.vendor.js"></script> // no change 

毎回新しいバンドルバージョンが利用可能です。

Answer 1

驚いたことに、これはhtml-webpack-pluginが対象です。

var webpack = require('webpack'); 
var path = require('path'); 
var HTMLWebpackPlugin = require('html-webpack-plugin'); 

module.exports = function(env) { 
    return { 
     entry: { 
      main: './src/index.js', 
      vendor: 'moment' 
     }, 
     output: { 
      filename: '[chunkhash].[name].js', 
      path: path.resolve(__dirname, 'dist') 
     }, 
     plugins: [ 
      new webpack.optimize.CommonsChunkPlugin({ 
       names: ['vendor', 'manifest'] 
      }), 
      new HTMLWebpackPlugin({ 
       tempate: path.join(__dirname, './src/index.html') 
      }) 
     ] 
    } 
}; 

これは、正しい順序でscript年代を含むdistディレクトリにindex.htmlを生成します。

youtube example