时间戳

首页 > 解决方案 > 将某些目录中的代码提取到 webpack 4 中的单独包中

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

问题描述

我有以下设置。我有一堆入口点（都有自己的 html 页面）。所有条目都位于/src/entry/. 外部代码位于/node_modules. 而且我还有一堆条目使用的内部代码。这位于/src/node_modules/我的案例中。

现在为了获得最佳的长期缓存，我想将所有内容/node_modules放在它自己的包中vendors，并将所有内容src/node_modules放在一个名为libs.

如何使用 SplitChunksPlugin 进行设置？

我尝试了以下方法：

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

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

标签： javascriptwebpackwebpack-4

解决方案

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

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

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

推荐阅读