html-webpack-plugin的作用

html-webpack-plugin的主要作用就是在webpack构建后生成html文件，同时把构建好入口js文件引入到生成的html文件中。

安装html-webpack-plugin

Webpack 5

  npm i --save-dev html-webpack-plugin  

  yarn add --dev html-webpack-plugin

Webpack 4

  npm i --save-dev html-webpack-plugin@4

  yarn add --dev html-webpack-plugin@4

 webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    mode:"development",
    plugins: [
        new HtmlWebpackPlugin({
            filename:'index.html',
            template:'./public/index.html'
        })
    ]
}

项目文件目录结构：

执行webpack打包命令，在 ./dist 文件夹下会生成，main.js和index.html两个文件，index.html文件引入了main.js文件。

更多html-webpack-plugin设置：https://www.npmjs.com/package/html-webpack-plugin

建议打包输出请先使用clean-webpack-plugin插件清空目录。