webpack - webpack v5 忽略供应商 dll

Question

我现在正忙于升级我们所有的 JS 堆栈的痛苦任务。我更新了每个库，除了一个：导致一堆问题的 webpack v5。我不能真正发布我所有的 webpack 配置，它是一个复杂而大的项目。我遇到的问题与此错误有关：

你不应该使用<withRouter(withReducer(EpicInjector)) /> outside a <Router>. 我用一个简单的<Switch><Route>... 替换来简化代码，但同样的错误是在几乎没有启动根 app.js 时出现：

const render = (messages, appComp) => {
      ReactDOM.render(
        <Provider store={store}>
              <ConnectedRouter history={history}>
                <CookiesProvider>
                  <Switch>
                      <Route><div>hello</div></Route>
                  </Switch>
                </CookiesProvider>
          </ConfigProvider>
        </Provider>,
        MOUNT_NODE,
      );
    };

当您搜索它时，它看起来很明显，但请记住，一切都与 webpack v4 完美配合。它逐渐减少到拥有 2 个实例或 react-router，但我认为它不止于此。当使用 webpack-bundle-analyzer 查看我的包时，我看到我的供应商包几乎相同，这是个好消息。但是当查看我的应用程序包时，它有很大的不同。首先，webpack v4 创建了一个大约 12mb 的 0.chunk.js（我在 dev 中）以及一个 6mb 的 app.js。当我检查引用时，所有 react-router ref 都在我的供应商 dll.js 中，这正是我想要的。在 webpack v5 上，我得到了 11mb 的 app.js 和一个名为：vendors-node_modules_formatjs_intl-pluralrules_locale-data_en_js-node_modules_formatjs_intl-p-638766.chunk.js 的 15mb 的丑陋块（哇，这真是丑陋得要命）。没有对供应商 dll 的引用。js 除了在分析器中提到 21k 之外（如果我查看生成的文件，它应该至少为 30mb）所以这就是正在发生的事情。它完全忽略了供应商。

Webpack 配置几乎相同，除了：

optimization: {
  moduleIds: 'named',
  emitOnErrors: false,
},

和节点 fs: 'empty 被替换为：

  fallback: {
    fs: false,
    crypto: require.resolve("crypto-browserify"),
    path: require.resolve("path-browserify"),
    vm: require.resolve("vm-browserify"),
  },

其他是配置中非常小的细节。我像以前一样使用 webpack.DllConfig 和 DllReferencePlugin（它并没有真正改变我读到的内容）。它生成 dll 清单，供应商约为。和以前一样，但是即使参考插件指向它，主构建也会完全忽略它。因此，当我在浏览器中加载所有内容时，它正在加载我的供应商、块和应用程序，并且响应路由器发出了繁荣的抱怨（这不怪我，我有多个 react-router 实例！）。

我正在搜索，可能出了什么问题并尝试了所有可能的 webpack 选项，但在很长一段时间后仍然卡住了，需要一些帮助。

谢谢一堆。

标签： webpackwebpack-4webpack-5