安装配置html-webpack-plugin
1.安装
npm install html-webpack-plugin@5.3.2 -D
2.配置
在webpack.config.js文件中写入上述代码:
const path = require('path')
//1.导入html-webpack-plugin插件,得到插件得构造函数
const HtmlPlugin = require('html-webpack-plugin')
//2. new 构造函数,创建插件的实体对象
const htmlPlugin = new HtmlPlugin({
//指定要复制哪个页面
template: './src/index.html',
//指定复制出来的文件名和存放路径
filename: './index.html'
})
//使用Node.js中的导出语法,向外导出一个webpack的配置对象
module.exports = {
//代表webpack运行模式,可选值有两个development(开发阶段使用,速度快) 和 production(要发布要上线使用,使生成的文件体积更小但打包时间更长)
mode: 'development',
//entry: '指定要处理那个文件'
entry: path.join(__dirname,'./src/index1.js'), //打包入口文件的路径
// output节点指定打包的出口
output: {
//存放的目录
path: path.join(__dirname,'./dist'), //输出文件的存放路径
filename: 'bundle.js' //输出文件的名称,默认的是main.js
},
//3.插件的数组,将来webpack在运行时,回家再并调用这些插件
plugins: [htmlPlugin]
}//运行这里的代码需要在cmd中通过npm run dev 执行
3.html-webpack-plugin插件的作用
- 通过HTML插件复制到项目根目录中的index.html页面,也被放到了内存中
- HTML插件在生成的 index.html页面,自动注入了打包的 bundle.js文件