Webpack公共chunk加载时执行函数的实现方案咨询

你遇到的问题确实是Webpack splitChunks 的预期行为——当自动拆分的chunk名称和某个入口点名称重合时，Webpack会移除该入口点，将其代码合并进自动生成的chunk，但不会自动执行原来入口点的代码（因为它不再被标记为入口执行模块）。下面是两种可行的解决思路：

方案1：分离执行入口与共用代码chunk #

把自动拆分的共用代码chunk改名，保留独立的common入口作为初始化执行模块，同时让其他入口依赖这个模块，确保它会被优先加载执行：

修改后的Webpack配置 #

module.exports = {
  entry: {
    common: './src/entryPoints/common.tsx',
    // 让entry1和entry2都依赖common入口
    entry1: ['./src/entryPoints/entry1.tsx', './src/entryPoints/common.tsx'],
    entry2: ['./src/entryPoints/entry2.tsx', './src/entryPoints/common.tsx']
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        // 把自动拆分的共用代码chunk改名为shared，避免和entry的common冲突
        shared: {
          name: 'shared',
          chunks: 'all',
          minChunks: 2,
          priority: 1,
          enforce: true
        },
        vendors: {
          test: /[\/]node_modules[\/]/,
          name: 'vendor',
          chunks: 'all',
          priority: 3,
        }
      }
    }
  }
  // ... 其他配置
};

这样做的好处是：

• common入口会被保留为独立chunk，加载时会自动执行里面的polyfills和console.log
• shared chunk会自动收集entry1和entry2的共用代码，Webpack会处理好依赖加载顺序

方案2：让初始化代码被所有入口引用 #

如果你不想新增额外的chunk，可以把初始化逻辑抽成单独模块，让所有业务入口都引用它，这样它会被打包进自动拆分的common chunk并自动执行：

步骤1：抽离初始化模块 #

创建src/common-init.ts文件，存放你的初始化逻辑：

import '../misc/polyfills';
console.log('COMMON ENTRY POINT');

步骤2：在业务入口中引入该模块 #

在entry1.tsx和entry2.tsx的顶部添加引用：

// entry1.tsx
import '../common-init';
// ... 你的业务代码

// entry2.tsx
import '../common-init';
// ... 你的业务代码

步骤3：修改Webpack配置 #

移除原来的common入口，保持splitChunks配置不变：

module.exports = {
  entry: {
    entry1: './src/entryPoints/entry1.tsx',
    entry2: './src/entryPoints/entry2.tsx'
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        common: {
          name: 'common',
          chunks: 'all',
          minChunks: 2,
          priority: 1,
          enforce: true
        },
        vendors: {
          test: /[\/]node_modules[\/]/,
          name: 'vendor',
          chunks: 'all',
          priority: 3,
        }
      }
    }
  }
  // ... 其他配置
};

因为common-init被两个入口共同引用，Webpack会把它打包进common chunk，当common chunk加载时，里面的初始化代码会自动执行（因为业务入口直接引用了它）。

为什么原方案不生效？ #

正如你推测的，当splitChunks.name和入口名称匹配时，Webpack会移除该入口并将其代码合并进自动生成的chunk，但原来的入口代码会被当作普通模块处理，不会被标记为「需要立即执行的入口逻辑」——只有被其他模块引用或者作为入口的代码才会被Webpack触发执行，这就是你看不到console.log输出的原因。

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