本篇在webpack-dev-server的使用的基础上

html-webpack-plugin

html-webpack-plugin是一个把页面生成在内存中的插件，本页面保存在内存中，效率远高于保存在磁盘中

html-webpack-plugin使用

安装

cnpm i html-webpack-plugin -D

在webpack.config.js中导入使用插件

导入插件

const HtmlWebPackPlugin = require('html-webpack-plugin');

创建对象

const htmlPlugin = new HtmlWebPackPlugin({
template:path.join(_dirname,'./src/index.html'),//源文件
filename:'index.html'//生成的内存中的首页名称
})

在mode里引用

plugins:[
htmlPlugin
]

如下

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');//导入 在内存中自动生成index页面的插件

//创建一个插件的实例对象
const htmlPlugin = new HtmlWebPackPlugin({
    template:path.join(__dirname,'./src/index.html'),//源文件
    filename:'index.html'//生成的内存中的首页名称
})
module.exports = {
    mode:'development', //development开发。production 发布
    plugins:[
        htmlPlugin
    ]

}

结果运行时报错

image.png

是由于webpack全局安装所致，改为局部安装即可

cnpm install webpack --save-dev