webpack-安装html-webpack-plugin

发布时间 2023-05-22 23:19:20作者: Young_Yang_Yang

安装html-webpack-plugin

运行如下的命令,即可在项目中安装此插件:
npm install html-webpack-plugin -D

配置html-webpack-plugin

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

module.exports = {
    mode: 'production',
    plugins: [htmlPlugin],//通过plugins节点,使htmlPlugin插件生效
}

解惑html-webpack-plugin

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