Webpack 5 (Webpack Encore)：如何在同一页面上运行多个 webpack 实例并避免任何冲突？

Question

对于相当大的 Web 应用程序，我想在同一页面上运行 Webpack (Encore) 的多个实例。当我将所有源代码放入单个 Webpack 配置中时，一切都会正常工作。但是，当我有两个具有相同源代码的不同配置时，我总是会收到如下错误：

\n

lib.84f46ab6.js:19 Uncaught TypeError: __webpack_require__.n is not a function\n    at Object../assets/js/lib.js (lib.84f46ab6.js:19)\n    at __webpack_require__ (bootstrap:19)\n    at __webpack_exec__ (codemirror.css?f2af:1)\n    at codemirror.css?f2af:1\n    at Function.__webpack_require__.O (chunk loaded:25)\n    at codemirror.css?f2af:1\n    at webpackJsonpCallback (jsonp chunk loading:36)\n    at Array.forEach (<anonymous>)\n    at jsonp chunk loading:49\n    at runtime.7c0b88c9.js:146\n

\n

经过一番研究后，我在这里找到了一篇关于该问题的文章：https ://medium.com/@cliffers/how-to-run-multiple-webpack-instances-on-the-same-page-and-avoid-any-conflicts -4e2fe0f016d1

\n

它基本上说：

\n

\n

Webpack 未在全局命名空间\xe2\x80\xa6 中运行，那么是什么导致了\n问题？它是一个名为 CommonsChunkPlugin 的 Webpack 插件，用于通过 JSONP 进行 ansyc 按需加载代码。该插件注册并使用名为 window.webpackJsonp 的全局函数，这就是发生冲突的地方。

\n

只需更改至少一个正在运行的 webpack 实例的 webpackJsonp 函数的名称即可解决冲突。

\n

\n

但他们在 Webpack 5 中删除了这个功能，我仍然不知道如何正确配置它。有谁知道如何使用最新版本的 Webpack Encore（当前为 1.1.2）解决这个问题？

\n

我的配置的一部分：

\n

// ...\nconst libConfig = Encore.getWebpackConfig();\n\n// ...\n\n// build the second configuration\nconst appConfig = Encore.getWebpackConfig();\n\nappConfig.name = \'appConfig\';\n\n// Export the final configuration\nmodule.exports = [libConfig,appConfig]\n

\n

这就是 Encore 中多个配置的基本配置方式：https://symfony.com/doc/current/frontend/encore/advanced-config.html

\n

Answer 1

最后我通过在配置中添加以下设置解决了这个问题：

appConfig.output.chunkLoadingGlobal = 'appConfigChunkLoadingGlobal'

就如此容易。它确保用于加载块的全局 Webpack 函数的两个配置名称不同。它是旧webpackJsonp功能的替代品。