Webpack5打包多入口的html项目

具体配置如下：

const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
  // 多入口
  entry: {
    page1: ["./src/assets/js/page1.js"],
    page2: ["./src/assets/js/page2.js"],
    page3: ["./src/assets/js/page3.js"],
  },
  output: {
    path: resolve(__dirname, "dist"),
    filename: "assets/js/[name][hash:10].js",
  },
  module: {
    rules: [
      { test: /\.css$/, use: [MiniCssExtractPlugin.loader, "css-loader"] },
      {
        test: /\.(png|jpg|jpeg|gif|icon|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: () => {
            return false; // 不在css中生产base64，全部打包为图片资源
          },
        },
        generator: {
          filename: "assets/images/[name][hash:10][ext]",
        }
      },
      {
        test: /\.(woff|woff2|svg|eot|ttf)\??.*$/,
        type: "asset/resource",
        generator: {
          filename: "assets/font/[name][hash:10][ext]",
        }
      },
      {
        test: /\.(htm|html)$/i,
        use: ["html-withimg-loader"], // 处理html中标签引入的图片路径
      }
    ],
  },
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: "./src/assets/js/common", //想要复制的文件夹
          to: "assets/js/common", //复制在哪个文件夹
        },
        {
          from: "./src/assets/images/icon", //想要复制的文件夹
          to: "assets/images/icon", //复制在哪个文件夹
        },
      ],
    }),
    new HtmlWebpackPlugin({
      template: "./src/index1.html", // webpack 模板的相对或绝对路径
      filename: "index1.html", // 将 HTML 写入到的文件
      chunks: ["page1"], // 需要添加的js文件
      hash: true, // 将css和js加入hash值
      inject: "body", // 所有资源注入的位置
      scriptLoading: "blocking", // script 标签加载方式
      minify: {
        // collapseWhitespace: true,
        removeComments: true,
      },
    }),
    new HtmlWebpackPlugin({
      template: "./src/index2.html",
      filename: "index2.html",
      chunks: ["page2"],
      hash: true,
      inject: "body",
      scriptLoading: "blocking",
      minify: {
        // collapseWhitespace: true,
        removeComments: true,
      },
    }),
    new HtmlWebpackPlugin({
      template: "./src/index3.html",
      filename: "index3.html",
      chunks: ["page3"],
      hash: true,
      inject: "body",
      scriptLoading: "blocking",
      minify: {
        // collapseWhitespace: true,
        removeComments: true,
      },
    }),
    new MiniCssExtractPlugin({
      // chunkFilename: "[id].css",
      filename: "assets/css/style[hash:10].css",
    }), // 将css提取到单独的文件中
    new CssMinimizerWebpackPlugin(), //对css进行压缩
  ],
  // mode: "development",
  mode: "production",
};

打包前需要注意如下几点:

• html中通过link引入的css，需要替换为：在js中通过import方式引入
• html中通过script引入的page1.js、page2.js、page3.js等入口文件，需要先注释