1、安装
cnpm i html-webpack-plugin -D
2、在webpack.config.json中引用
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin') //第一步
module.exports = {
entry: path.join(__dirname, './src/main.js'),
output: {
path: path.join(__dirname, './dist'),
filename: 'bundle.js',
},
mode: 'development',
devServer: {
open: true,
port: 8080,
hot: true,
contentBase: 'src'
},
plugins: [
new htmlWebpackPlugin({ //第二步
template: path.join(__dirname, './src/index.html'), //指定生成模板的路径
filename: 'index.html' //指定生成页面的名称
})
]
}
3、html-webpack-plugin的作用
一、在内存中生成一个指定模板的文件,在访问时速度更快
二、自动为指定模板文件添加bundle.js文件