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

Posted 2023-03-03

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

【英文标题】：Webpack 5 (Webpack Encore): How to run multiple webpack instances on the same page and avoid any conflicts?

【发布时间】：2021-08-05 01:31:59

【问题描述】：

对于一个相当大的 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

【参考方案1】：

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

appConfig.output.chunkLoadingGlobal = 'appConfigChunkLoadingGlobal'

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