vue ---- webpack -插件 html-webpack-plugin

该插件解决的问题： 访问http根目录时，没有直接访问到src下得index.html
该插件会将src下的index.html 复制一份，放到根目录下一份
作用：
① 通过HTML插件复制到项目根目录中的index.html页面，也被放到了内存中
② HTML插件在生成的index.html页面，自动注入了打包的bundle.js文件

安装 html-webpack-plugin

npm install html-webpack-plugin@5.3.2 -D

配置

在webpack.config.js配置文件中配置

//1. 导入HTML插件，得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin')
//2. 创建HTML插件的实例对象
const htmlPlugin = new HtmlPlugin({
    template: './src/index.html', //指定原文件的存放路径
    filename: './index.html' // 指定生成的文件的存放路径
})



//使用 Node.js 中的导出语法，向外导出一个 webpack 的配置对象
module.exports = {
    //代表 webpack 运行的模式，可选值有两个 development 和 production
    mode: 'development',
    //3. 插件的数组，在webpack 运行时，会加载并调用这些插件
    plugins: [htmlPlugin],
}

运行

npm run dev

该首页不存在于物理磁盘中，存在于内存中

代码