如何配置Webpack生成两个独立可自加载的Bundle（含Worker Bundle）

你遇到的While running in normal mode it's not allowed to use a non-entry chunk (worker_bundle)错误，本质是因为Webpack的CommonsChunkPlugin有规则限制：在普通模式下，不能把已定义的入口chunk（比如你的worker_bundle）当作公共chunk来配置——这个插件的核心作用是提取多个chunk的公共代码到新的chunk，而非把入口chunk本身当成公共chunk处理。

要实现你的需求（让Web Worker专属的worker_bundle.js包含完整的Webpack运行时代码，且两个bundle完全独立），可以按照以下步骤调整配置：

1. 保留原入口配置不变 #

你的入口定义没问题，继续保留即可：

entry: {
  app: [ 'lodash', 'jquery', 'index', ],
  worker_bundle: [
    "parlib/atomics-shim.js",
    "parlib/message.js",
    "parlib/master-barrier.js",
    "parlib/worker-barrier.js",
    "parlib/marshaler.js",
    "parlib/worker-par.js"
  ]
}

2. 调整CommonsChunkPlugin配置，只处理app入口 #

修改插件配置，让公共代码提取仅针对app入口，完全不涉及worker_bundle：

plugins: [
  // 可选：提取app入口中的第三方依赖（比如lodash、jquery）到vendor.js，优化app.js体积
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    chunks: ['app'], // 仅对app入口的chunk进行处理
    minChunks: module => module.context && /node_modules/.test(module.context)
  }),
  // 可选：为app单独提取Webpack运行时代码到app-runtime.js，让app.js更精简
  new webpack.optimize.CommonsChunkPlugin({
    name: 'app-runtime',
    chunks: ['app'],
    minChunks: Infinity // 确保只提取运行时代码，不包含业务逻辑
  }),
  // 重点：不要添加任何针对worker_bundle的CommonsChunkPlugin配置！
]

3. 验证效果 #

这样配置后，Webpack会自动为worker_bundle打包完整的Webpack运行时（包括webpackJsonp、_webpack_require__这些核心函数），你可以直接在Web Worker中使用importScripts加载它，不需要依赖其他文件：

importScripts(location.origin + "/worker_bundle.js");
new WorkerPar();

如果不需要对app进行代码拆分优化，你甚至可以完全移除CommonsChunkPlugin配置——Webpack会默认给每个入口生成包含完整运行时的独立bundle，这样app.js和worker_bundle.js都会是自包含的，彼此完全独立。

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