Webpack 5中dependOn入口选项使用问题：生成代码无法运行

你遇到的问题是正常现象：当使用dependOn声明入口依赖时，Webpack会将该入口的代码处理为依赖于其他已加载chunk的模块，不会自动生成自执行函数包裹代码——因为它默认你会先加载依赖的chunk，再加载这个入口chunk。

解决办法： #

• 方法一：按顺序加载所有chunk
  在HTML文件中，必须先加载fizzbuzz/bundle.js和foobar/bundle.js，再加载main/bundle.js，示例：

  <script src="./dist/fizzbuzz/bundle.js"></script>
  <script src="./dist/foobar/bundle.js"></script>
  <script src="./dist/main/bundle.js"></script>
  

  这样依赖的chunk会先初始化Webpack的模块系统，main的代码就能正常执行。

• 方法二：配置runtimeChunk统一管理运行时
  如果不想手动维护加载顺序，可以在Webpack配置中添加runtimeChunk，让Webpack生成独立的运行时文件，确保模块系统正确初始化：

  const path = require('path');
  
  module.exports = {
      mode: 'production',
      resolve: {
          extensions: ['.js']
      },
      entry: {
          fizzbuzz: './src/libs/fizzbuzz/index.js',
          foobar:  './src/libs/foobar/index.js',
          main: {
              import: './src/libs/main/index.js',
              dependOn: ['foobar', 'fizzbuzz']
          }
      },
      output: {
          clean: true,
          filename: '[name]/bundle.js',
          path: path.resolve(__dirname, 'dist'),
      },
      optimization: {
          runtimeChunk: 'single' // 生成独立的runtime文件
      }
  }
  

  然后在HTML中先加载runtime.bundle.js，再加载其他chunk：

  <script src="./dist/runtime.bundle.js"></script>
  <script src="./dist/fizzbuzz/bundle.js"></script>
  <script src="./dist/foobar/bundle.js"></script>
  <script src="./dist/main/bundle.js"></script>
  

补充说明： #

dependOn的核心作用是提取共享依赖、避免重复打包，它本质上是让多个入口复用已有的chunk，所以依赖的chunk必须先于入口chunk加载，否则入口代码找不到依赖的模块。

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