安装配置html-webpack-plugin

安装配置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插件的作用

1. 通过HTML插件复制到项目根目录中的index.html页面，也被放到了内存中
2. HTML插件在生成的 index.html页面，自动注入了打包的 bundle.js文件