如何将单个模块代码拆分为在 webpack 中的多个入口点之间共享？

Question

我有一个非常大、较旧的 MVC 应用程序，我们已经开始为我们的一些 TS/JS 使用 webpack。我过去曾尝试实现代码拆分，但生成的模块非常庞大且命名笨拙。整个事情非常混乱。由于与旧版浏览器的一些兼容性问题，我们最终不得不将其回滚。

我们正在努力在 React 中做更多事情，我们希望避免在整个应用程序中重复 React 库，但我们还没有完全准备好转向完整的 SPA。相反，我们目前 "splitting" 路线上的应用程序使用大量入口点文件（目前为 44 个。）

是否可以仅将 React 和 React-DOM 模块提取到一个独立的模块中？我想我们仍然需要在我们使用它的地方导入它，这样类型检查就不会崩溃。

或者我们是否以老派的方式将 React 添加到页面，并消除那些警告和错误？

TLDR：当使用多个入口点时，如何将代码拆分为仅 React 本身？

Answer 1

这应该有效：

https://webpack.js.org/guides/code-splitting/#prevent-duplication

 optimization: {
     splitChunks: {
       chunks: 'all'
    }
   }

我从来没有使用过这么多入口点，但将其添加到您的 webpack 配置中，它应该开箱即用，提取反应到一个名为 vendors~main(long hash).js 的块中。该页面底部是分析工具，您可以检查您的捆绑包是否有任何剩余的重复项。

编辑补充：这个更好：

https://webpack.js.org/plugins/split-chunks-plugin/#split-chunks-example-3

module.exports = {
  //...
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\/]node_modules[\/](react|react-dom)[\/]/,
          name: 'vendor',
          chunks: 'all',
        }
      }
    }
  }
};

如何将单个模块代码拆分为在 webpack 中的多个入口点之间共享？

How can I code split a single module to be shared between multple entry points in webpack?

reactjs

webpack-4