为什么要用
我们都知道,通过webpack打包会生成最终的bundle.js
,然后我们需要新建一个index.html
,并在该文件中引用打包后的文件
<script src='./bundle.js' type='text/javascript' ></script>
复制代码
这样有一个问题,如果我们打包后的bundle.js
名称并不固定,可能会有hash值,我们每次打包后需要手动修改引用语句,有点麻烦,这事完全可以交给webpack来做,html-webpack-plugin
就是可以通过我们定义的一个html模板生成index.html
并自动引用打包后的文件
如何使用
安装
npm install html-webpack-plugin --save-dev
配置
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
//
plugins: [
new htmlWebpcakPlugin({
filename:'index.html', // set the filename
template:'/src/index.html' // set the template path
})
]
}
复制代码
详细options
看这里 html-webpack-plugin配置