2024-1-5(webpack代码分包demo)通过配置多个entry和htmlWebpackPlugin。可以生成多

const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const path = require("path");
module.exports = {
  mode: "production",
  entry: {
    index: "./src/index.js",
    login: "./src/login.js",
  },
  output: {
    filename: "[name].[hash:5].js",
    path: path.resolve(__dirname, "./build"),
  },
  module: {
    rules: [],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      chunks: ["index"], // entry入口中的js
      filename: "index.html", // 生成的html名称
    }),
    new HtmlWebpackPlugin({
      template: "./public/login.html",
      chunks: ["login"], // entry入口中的js
      filename: "login.html", // 生成的html名称
    }),
    new CleanWebpackPlugin(),
  ],
};

通过配置多个entry和htmlWebpackPlugin。可以生成多个html以及链入的js，实现项目代码逻辑的分离。我们也可以在多个入口js中使用reactDom.render(组件，public中配置的DOM节点)实现整个项目的拆分