前端用webpack如何每次构建的bundle.js都不一样

需求

每次代码变动后，构建的js文件都要不一样，这样内容升级后，用户在下载到最新的静态文件时，引用的是最新构建js文件。如果每次构建的都是一个固定的js文件名称，那在升级后客户端不会下载最新的js文件

解决办法

以来webpack和html-webpack-plugin插件
先安装npm install html-webpack-plugin --save-dev
然后在webpack.config.js中引入插件

var HtmlWebpackPlugin require('html-webpack-plugin')
...
output: {
        path: __dirname,
        filename: 'bundle_[hash].js'
    }
...
...
plugins: [
	new HtmlWebpackPlugin({
		title: 'this is html-webpack-plugin create'
	})
]

这样就可以每次打包时都生成一个带hash码的打包文件，自动生成一个index.html文件，同时这个打包文件被引入到了index.html文件里