我正在使用 webpack 生成哈希包文件名。
假设我使用的是静态 HTML、CSS 和 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
每当有新的 bundle 版本可用时自动。
最佳答案
令人惊讶的是,这就是 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')
})
]
}
};
这会在 dist
目录中生成一个 index.html
,其中包含按正确顺序排列的 script
。
关于javascript - Webpack - 更新 HTML 以包含最新 [散列] 包的最佳方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41942036/