Webpack使用plugin插件自动在打包目录生成html文件

我们使用html-webpack-plugin插件可以自动在打包代码目录生成html文件

使用步骤：

一、安装依赖

在控制台中输入如下代码：

npm i -D html-webpack-plugin

 二、在webpack.config.js中配置插件 

const HTMLPlugin = require("html-webpack-plugin");
module.exports = {
    mode: "production", // 设置打包的模式：production生产模式  development开发模式
    plugins:[new HTMLPlugin()]
}

三、打包文件

 在控制台中输入npx webpack进行项目打包，打包目录下就自动生成了index.html文件

四、根据模板在打包目录下生成html文件

 如果我们想要生成的html文件和src文件下的html文件中的一致，我们可以在创建HTMLPlugin实例对象的时候传入参数。

const HTMLPlugin = require("html-webpack-plugin");
module.exports = {
    mode: "production", // 设置打包的模式：production生产模式  development开发模式
    plugins: [new HTMLPlugin({
        template:"./src/index.html"  // 设置模板为src文件下的index.html文件
    })]
}