Webpack 怎么配置多入口应用， 并实现公共依赖的提取？

可以通过以下步骤实现：

1. 配置多入口

在 Webpack 配置中，可以定义多个入口点，每个入口对应一个输出文件。

const path = require("path");

module.exports = {
  entry: {
    app1: "./src/app1/index.js",
    app2: "./src/app2/index.js",
  },
  output: {
    filename: "[name].bundle.js", // 使用入口名称生成文件名
    path: path.resolve(__dirname, "dist"),
  },
};

2. 提取公共依赖

使用 SplitChunksPlugin 来提取公共依赖，确保不同入口点共享的模块只打包一次，减少重复代码。

module.exports = {
  // ...其他配置
  optimization: {
    splitChunks: {
      chunks: "all", // 从所有块中提取公共模块
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/, // 只提取来自 node_modules 的模块
          name: "vendor", // 公共依赖的名称
          chunks: "all",
        },
      },
    },
  },
};

3. 处理输出文件

通过以上配置，Webpack 将生成多个入口文件以及一个包含公共依赖的文件。例如：

• app1.bundle.js
• app2.bundle.js
• vendor.bundle.js（公共依赖）

4. HTML 文件引入

可以使用 HtmlWebpackPlugin 来生成 HTML 文件，自动引入打包生成的 JavaScript 文件。

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  // ...其他配置
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/app1/index.html",
      filename: "app1.html",
      chunks: ["vendor", "app1"], // 引入公共依赖和 app1
    }),
    new HtmlWebpackPlugin({
      template: "./src/app2/index.html",
      filename: "app2.html",
      chunks: ["vendor", "app2"], // 引入公共依赖和 app2
    }),
  ],
};

总结

通过上述配置，Webpack 能够有效管理多入口应用，提取公共依赖，确保代码的复用性和加载效率。每个入口点都可以独立打包，并且公共依赖仅打包一次，优化了整体性能。