如何提取 React 库以分离包？答案

【问题标题】：How to extract React library to separate bundle?如何提取 React 库以分离包？
【发布时间】：2019-02-17 23:32:06
【问题描述】：

是否可以通过 Webpack 4 提取 React 和（或）ReactDOM 库以分离捆绑包？例如，我有一个包含 React、ReactDOM 和 Moment.js 包的 React 应用程序。所以我希望结果是两个捆绑包：

react.js = react + react-dom
main.js = 时刻 + 应用组件

如何根据包的名称而不是入口点的使用频率来拆分捆绑包？

【问题讨论】：

您要找的概念通常称为“代码拆分”并创建“供应商块”：stackoverflow.com/questions/48985780/…
是的，你是对的。但我想知道是否可以手动设置这种拆分。所以我希望在我的供应商捆绑包中看到仅 React 和 ReactDOM，而不是片刻。
谢谢，@JamesHulse。我检查了这个线程，它对我有帮助
这个线程不会帮助分离 react 和 react-dom

标签： javascript reactjs webpack webpack-4 bundles

【解决方案1】：

嗨@VRSY 在花了一些时间了解 webpack 的SplitChunksPlugins.js 之后，我想出了如何编写 RegEx 以在单独的供应商块中提取 node_modules。

splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
          name: 'vendor',
          chunks: 'all',
        }
      }
    }

新块将大于 30kb

我之前在为模块文件夹名称编写正则表达式时犯了一个错误。但是相对路径正则表达式是匹配正则表达式的好选择。

【讨论】：