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

问题描述

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

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

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

它基本上说：

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

只需将 webpackJsonp 函数的名称更改为至少一个 在 webpack 实例上运行并解决了冲突。

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

我的配置的一部分：

// ...
const libConfig = Encore.getWebpackConfig();

// ...

// build the second configuration
const appConfig = Encore.getWebpackConfig();

appConfig.name = 'appConfig';

// Export the final configuration
module.exports = [libConfig,appConfig]

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

解决方法

最后我通过在配置中添加以下设置来解决它：

appConfig.output.chunkLoadingGlobal = 'appConfigChunkLoadingGlobal'

就这么简单。它确保用于加载块的全局 Webpack 函数对于两个配置不具有相同的名称。它是旧的 webpackJsonp 函数的替代品。