从某些目录中提取代码到webpack 4中的单独包中

Question

我有以下设置。 我有一堆入口点（所有入口点都有自己的html页面）。 所有条目都位于/src/entry/中。 外部代码位于/node_modules中。 我还有一些条目也使用的内部代码。在我的情况下，它位于/src/node_modules/中。

现在，为了获得最佳的长期缓存，我想将/node_modules中的所有内容放入其自己的捆绑包vendors中，并将src/node_modules中的所有内容放入一个名为libs的捆绑包中。 / p>

如何使用SplitChunksPlugin进行设置？

我尝试了以下操作：

const optimization = {
  splitChunks: {
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name: "vendors",
        chunks: "all"
      },
      lib: {
        test: /[\\/]src[\\/]node_modules[\\/]/,
        name: "libs",
        chunks: "all"
      }
    }
  },
  runtimeChunk: "single"
};

但是它把所有东西都放在了供应商捆绑包中。

---

Answer 1

vendor块的test正则表达式正在查找两个文件夹，因为名称node_modules被使用了两次-一次用于安装NPM，一次用于在源代码中使用的库。

如果您可以将/src/node_modules/重命名为/src/lib/并更新vendor块正则表达式，则可以通过这种方式将其拆分。

如果文件夹重命名不可行，您还可以更改vendor正则表达式测试以排除/src文件夹中的匹配项。