javascript - 单独的包形成动态导入的节点模块

Question

我在 webpack 配置中有以下配置用于拆分块。这完美地创建了两个捆绑供应商（在初始文件中导入的节点模块）和通用（在延迟加载的组件中导入的节点模块）

splitChunks: {
        name: true,
        cacheGroups: {
          default: false,
          vendors: false,
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: "vendors",
            chunks: "initial"
          },
          common: {
            test: /[\\/]node_modules[\\/]/,
            name: "common",
            minChunks: 2,
            chunks: "async",
            priority: 10,
            reuseExistingChunk: true,
            enforce: true
          }
        }
      },

问题 -但有些节点模块我不想包含在任何捆绑包中。既不是上述两个也不是主要的捆绑包，而是单独创建。

import('lodash')应该创建一个 lodash.chunk.js。

import('underscore')应该创建一个 underscore.chunk.js。

我能想到神奇的评论吗？/* webpackIgnore: true*/

Answer 1

在这里，您的 lodash 将根据当前的 splitchunks 配置添加到公共块中。要将其作为单独的块加载，请将您的 splitchunks 配置更改为

var vendorCheck = function vendorCheck(module) {
  var request = module.userRequest;
  // Specify the packages in the condition that need not be present in vendor chunk
  // Here I am excluding the package lodash from vendor chunk
  return request && request.indexOf('node_modules') >= 0 && request.indexOf('node_modules/lodash') === -1
};

var lodashCheck = function lodashCheck(module) {
  var request = module.userRequest;
  return request && request.indexOf('node_modules/lodash') >= 0
}

cacheGroups: {
    default: false,
    'lodash': {
      name: 'lodash',
      chunks: 'all',
      minChunks: 1,
      test: lodashCheck
    },
    vendor: {
      name: 'vendor',
      chunks: 'all',
      minChunks: 1,
      test: vendorCheck
    },
    common: {
        test: vendorCheck,
        name: "common",
        minChunks: 2,
        chunks: "async",
        priority: 10,
        reuseExistingChunk: true,
        enforce: true
    }
}