安装
npm i html-webpack-plugin -D
webpack.config.js
const path = require(‘path‘);//启用热更新的第二步,导入webpackconst webpack = require(‘webpack‘);//导入在内存中生成html页面的插件,只要是插件,都要放到plugins节点中去const htmlWebpackPlugin = require(‘html-webpack-plugin‘);module.exports = { ???entry: path.join(__dirname, ‘./src/main.js‘), ???output: { ???????path: path.join(__dirname, ‘./dist‘), ???????filename: ‘bundle.js‘ ???}, ???devServer: { //这是配置webpack-dev-server命令参数的第二种形式 ???????open: true, //自动打开浏览器 ???????port: 3100, //设置端口 ???????contentBase: ‘src‘, //指定托管的根目录 ???????hot: true //启用热更新的第一步 ???}, ???plugins: [ //配置插件的节点 ???????//启用热更新第三步 ???????new webpack.HotModuleReplacementPlugin(), //new一个热更新的模块对象 ???????new htmlWebpackPlugin({ //创建一个在内存中生成html页面的插件 ???????????template : path.join(__dirname,‘./src/index.html‘), //指定模板页面,根据指定的路径生成内存中的页面 ???????????filename : ‘index.html‘ //指定内存中生成的页面的名称 ???????}) ???]}
当使用html-webpack-plugin之后,我们不再需要用手动去处理bundle.js。
Vue系列之 => html-webpack-plugin的两个基本作用
原文地址:https://www.cnblogs.com/winter-shadow/p/10241807.html