javascript - Webpack 5 (Webpack Encore) : How to run multiple webpack instances on the same page and avoid any conflicts?

Question

对于一个非常大的 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 does not run in the global namespace…so whats causing theissue? Its a webpack plugin called CommonsChunkPlugin which is usedfor ansyc on demand loading of code via JSONP. The plugin registersand uses a global function named window.webpackJsonp and thats whereconflict occurs.

Simply change the name of the webpackJsonp function for at least oneon the webpack instances running and the conflict is resolved.

但是他们已经在 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

Answer 1

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

appConfig.output.chunkLoadingGlobal = 'appConfigChunkLoadingGlobal'

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