Webpack5 处理HTML资源

 1. 下载安装：npm install --save-dev html-webpack-plugin

 2. 配置文件 webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  plugins: [new HtmlWebpackPlugin()],
};

 重新打包时发现html文件的其他结构没了，若我们想要保留html内的结构，再自动引入js，我们可以在配置文件中这样配置：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  plugins: [
        // 以 public/index.html 为模板创建文件
        // 新的html文件有两个特点:1. 内容和源文件一致 2. 自动引入打包生成的js等资源
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, "public/index.html")
        })
    ],
};

3. 去掉引入的 js 文件，因为 HtmlWebpackPlugin 会自动引入