tml-webpack-plugin是导入在内存中生成 HTML 页面的 插件。
作用：
1.自动在内存中，根据指定的模板页面，生成一份内存中的首页，同时自动把打包好的bundle注入到页面底部
2. 自动，把打包好的 bundle.js 追加到页面中去
使用cnpm i html-webpack-plugin -D命令 安装
注：
只要是插件，都一定要放到 plugins 节点中取
webpack.config.js文件
const path = require('path')
const webpack = require('webpack');
var htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: path.join(__dirname, './src/main.js'),
output: {
path: path.join(__dirname, './dist'),
filename: 'bundle.js'
},
devServer: {
open: true,
port: 3000,
contentBase: 'src',
hot: true
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new htmlWebpackPlugin({
template: path.join(__dirname, './src/index.html'), // 指定模板文件路径
filename: 'index.html' // 设置生成的内存页面的名称
})
]
}
使用 npm run dev 命令运行项目
注：
如果没有安装 cnpm 输入 npm install -g cnpm --registry=https://registry.npm.taobao.org 命令安装
