Webpack v2中CommonsChunkPlugin多入口场景下的初始化问题

你遇到的核心问题是：Webpack的runtime代码（包括关键的webpackJsonp函数）被打包进了vendor公共chunk里，而第二个bundle的模块加载逻辑依赖这个函数，所以单独加载时会因为找不到webpackJsonp而初始化失败。下面给你两种实用的解决办法：

方案一：拆分独立的Runtime Chunk（推荐） #

这个方案会把Webpack的runtime代码从vendor chunk中分离出来，生成一个单独的runtime chunk。这样：

• 加载第一个bundle时，只需要按顺序加载runtime.js → vendor.js → bundle1.js
• 单独加载第二个bundle时，只需要加载runtime.js → bundle2.js（因为它不需要vendor里的依赖）

修改你的Webpack配置如下：

const webpack = require('webpack');
const path = require('path');

module.exports = {
  entry: {
    bundle1: './src/bundle1.js',
    bundle2: './src/bundle2.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    // 提取node_modules中的依赖到vendor chunk
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function(module) {
        // 匹配node_modules中的模块
        return module.context && module.context.indexOf('node_modules') !== -1;
      }
    }),
    // 提取Webpack runtime代码到独立的runtime chunk
    new webpack.optimize.CommonsChunkPlugin({
      name: 'runtime',
      minChunks: Infinity // 强制只提取runtime，不包含任何业务模块
    })
  ]
};

打包后会生成runtime.js、vendor.js、bundle1.js、bundle2.js四个文件，按对应的顺序加载即可。

方案二：让每个入口使用独立的Jsonp函数 #

如果你的第二个bundle完全不需要和第一个bundle在同一页面加载，也不想额外加载runtime chunk，可以给两个入口分别配置独立的webpackJsonp函数名，让它们的模块加载逻辑完全独立。

你可以使用Webpack的多配置模式，分别为两个入口编写配置：

const webpack = require('webpack');
const path = require('path');

module.exports = [
  // 第一个入口：bundle1 + vendor
  {
    entry: './src/bundle1.js',
    output: {
      filename: 'bundle1.js',
      path: path.resolve(__dirname, 'dist'),
      jsonpFunction: 'webpackJsonpBundle1' // 自定义jsonp函数名
    },
    plugins: [
      new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        minChunks: function(module) {
          return module.context && module.context.indexOf('node_modules') !== -1;
        }
      })
    ]
  },
  // 第二个入口：独立的bundle2
  {
    entry: './src/bundle2.js',
    output: {
      filename: 'bundle2.js',
      path: path.resolve(__dirname, 'dist'),
      jsonpFunction: 'webpackJsonpBundle2' // 另一个自定义jsonp函数名
    }
  }
];

这样打包后，bundle1.js和vendor.js使用webpackJsonpBundle1，bundle2.js使用webpackJsonpBundle2，彼此完全独立，单独加载bundle2.js时不需要依赖任何其他文件。

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