Webpack 5 多入口自动导入依赖拆分chunks的配置方案咨询

方案1：仅拆分异步模块（零改造成本，最适配现有场景） #

该方案完全不需要修改现有ASP.NET的引入逻辑，仅需调整webpack配置即可实现代码拆分：

• 将optimization.splitChunks.chunks从all改为默认的async
• 所有需要拆分的非首屏代码走ES模块动态导入语法import()声明，比如React路由组件、大体积低频组件都可以用异步方式引入
  原理：webpack默认会把异步导入的模块拆分为独立chunk，入口文件内置的模块加载逻辑会在需要用到对应模块时自动发起请求加载，无需手动引入拆分后的chunk文件。
  如果需要给异步chunk指定可读名称，可以在import()语句里添加webpack魔法注释：

const UserCenter = import(/* webpackChunkName: "user-center" */ './pages/UserCenter')

方案2：拆分同步+异步模块，入口自动加载所有依赖 #

如果需要拆分同步加载的公共代码（比如react、react-dom等通用第三方依赖），也无需手动维护chunk列表，按以下步骤配置即可：

1. 启用webpack原生runtimeChunk配置，把模块加载逻辑剥离为独立的runtime单元：

// webpack.config.js
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
    // 为每个入口生成单独的runtime chunk
    runtimeChunk: {
      name: entrypoint => `runtime-${entrypoint.name}`
    }
  }
}

2. 配合简单的自定义webpack插件，生成入口引导文件，保持原有ASP.NET引入路径不变：

const webpack = require('webpack')
module.exports = {
  plugins: [
    // 自定义插件：生成入口引导代码
    function () {
      this.hooks.emit.tapAsync('GenerateEntryBootstrap', (compilation, callback) => {
        const publicPath = compilation.outputOptions.publicPath || ''
        compilation.entrypoints.forEach((entry, entryName) => {
          // 获取当前入口所有依赖的JS文件列表
          const jsFiles = [...entry.chunks].flatMap(chunk => 
            chunk.files.filter(file => file.endsWith('.js'))
          )
          // 生成引导代码，按依赖顺序加载所有chunk
          const bootstrapCode = jsFiles.map(file => 
            `document.write('<script src="${publicPath}${file}"><\/script>')`
          ).join('')
          // 输出到原入口文件路径，替换原有单入口文件
          compilation.emitAsset(`${entryName}.js`, new webpack.sources.RawSource(bootstrapCode))
        })
        callback()
      })
    }
  ]
}

配置完成后，ASP.NET页面引入的还是原来的[入口名].js文件，这个引导文件会自动按顺序加载所有依赖的runtime、公共chunk、业务代码，无需手动维护chunk列表。

方案3：后端读取资源映射表适配 #

如果允许小幅调整ASP.NET逻辑，可以用webpack-assets-manifest插件生成资源映射文件：

const WebpackAssetsManifest = require('webpack-assets-manifest')
module.exports = {
  plugins: [
    new WebpackAssetsManifest({
      output: 'asset-manifest.json',
      entrypoints: true
    })
  ]
}

每次打包后会生成asset-manifest.json，里面包含每个入口对应的所有依赖资源列表，ASP.NET后端读取这个文件，渲染页面时自动注入对应入口的所有script标签即可。

内容的提问来源于stack exchange，提问作者minhtuanta