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

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 the issue? Its a webpack plugin called CommonsChunkPlugin which is used for ansyc on demand loading of code via JSONP. The plugin registers and uses a global function named window.webpackJsonp and thats where conflict occurs.

Simply change the name of the webpackJsonp function for at least one on 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'

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

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

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

javascript

configuration

jsonp

webpack

webpack-encore

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

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

javascript

configuration

jsonp

webpack

webpack-encore

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