在 Webpack 中配置多入口应用并实现公共依赖的提取

1. 配置多入口点

首先，在 webpack.config.js 文件中定义多个入口点。你可以通过对象形式来指定多个入口点，每个入口点对应一个输出文件。

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')
  },
  // 其他配置...
};

在这个例子中，app1 和 app2 分别对应两个不同的入口文件，Webpack 会分别为它们生成一个输出文件，文件名分别为 app1.bundle.js 和 app2.bundle.js。

2. 使用 optimization.splitChunks 提取公共依赖

为了提取公共依赖，可以在 optimization 配置项中使用 splitChunks 选项。splitChunks 可以根据一定的策略将公共模块提取到单独的文件中。

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')
  },
  optimization: {
    splitChunks: {
      chunks: 'all', // 对所有类型的 chunk 进行分割
      minSize: 10000, // 最小的 chunk 大小，默认是 20000 字节
      maxSize: 0, // 最大的 chunk 大小，默认是 0，表示没有限制
      minChunks: 1, // 模块必须被共享的次数，默认是 1
      maxAsyncRequests: 10, // 按需加载时的最大并行请求数，默认是 10
      maxInitialRequests: 5, // 入口点的最大并行请求数，默认是 5
      automaticNameDelimiter: '~', // 自动生成的 chunk 名称分隔符，默认是 ~
      name: true, // 使用默认的命名规则
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/, // 匹配 node_modules 中的模块
          priority: -10, // 设置优先级，负数表示较低的优先级
          filename: 'vendors~[name].js' // 自定义公共 chunk 的文件名
        },
        default: {
          minChunks: 2, // 至少被两个 chunk 共享
          priority: -20, // 设置优先级
          reuseExistingChunk: true, // 如果当前 chunk 已经包含了一个模块，则不再生成新的 chunk
          filename: 'common~[name].js' // 自定义公共 chunk 的文件名
        }
      }
    }
  },
  // 其他配置...
};

3. 解释 cacheGroups 配置

vendors：这是一个缓存组，用于匹配来自 node_modules 的模块，并将它们提取到一个名为 vendors~[name].js 的文件中。
default：这是另一个缓存组，用于匹配至少被两个 chunk 共享的模块，并将它们提取到一个名为 common~[name].js 的文件中。

4. 动态导入和代码分割

如果你的应用中使用了动态导入（import()），Webpack 会自动进行代码分割，生成按需加载的 chunk。这对于提高应用的加载性能非常有帮助。

// 动态导入示例
import('./module').then((module) => {
  // 使用 module
});

5. 测试和优化

配置完成后，运行 webpack 命令进行构建，检查生成的文件是否符合预期。可以通过查看 dist 目录下的文件来验证公共依赖是否被正确提取。

6. 生产环境优化

在生产环境中，建议使用 mode: ‘production’ 模式来启用更多优化，如压缩、树摇等。

module.exports = {
  mode: 'production',
  // 其他配置...
};

原文地址：https://blog.csdn.net/weixin_57837275/article/details/142461527

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！