webpack - 如何编码拆分 Webpack 4 中的两个条目之一？

Question

我有一个看似非常简单的 Webpack 代码拆分设置，但在迁移到 Webpack 4 时遇到问题。我有两个条目，称为 main和 preview .我想将初始代码拆分为 vendor main 中 vendor 模块的 block ，但我想保留 preview作为一个单独的 block 。

Webpack 3 中工作配置的相关部分:

{
  entry: {
    main: './src/application.js',
    preview: './src/preview.js',
  },
  plugins: [{
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      chunks: ['main'],
      minChunks({context}) {
        if (!context) {
          return false;
        }
        const isNodeModule = context.indexOf('node_modules') !== -1;
        return isNodeModule;
      },
    }),
  }]
}

具体来说，使用 chunks CommonsChunkPlugin 中的属性(property)options 让我可以轻松地做我需要做的事情。 Webpack 4 的 optimization.splitChunks 中是否有等价物？配置？

Answer 1

以下 Webpack 4 配置仅拆分 main模块 vendor 依赖项到一个单独的 block 中。 preview 的其他依赖项保留在该 block 内。

{
    entry: {
        main: './test/application.js',
        preview: './test/preview.js'
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                vendors: {
                    name: 'vendors',
                    chunks: 'all',
                    enforce: true,
                    priority: 1,
                    test(module, chunks) {
                        const name = module.nameForCondition && module.nameForCondition();
                        return chunks.some(chunk => chunk.name === 'main' && /node_modules/.test(name));
                    }
                }
            }
        }
    }
}

除非我们配置 preview，否则共享依赖项包含在 vendor 捆绑包中。 cacheGroup 具有更高的优先级，以强制此处包含的所有依赖项都应保留在此 block 中。

有关更多 Webpack 4 相关信息/配置，您可以查看 webpack-demo项目。

为了强制从 main 中拆分所有 vendor 依赖项并从 main 重复使用它们和 preview必须配置 preview 的 block 缓存组为:

preview: {
    name: 'preview',
    chunks: 'all',
    enforce: true,
    priority: 0,
    test(module, chunks) {
        return chunks.some(chunk => chunk.name === 'preview');
    }
}

注意 preview 的 cacheGroup block 的优先级低于 vendors一个以确保所有 main依赖关系也是 preview 中的依赖关系也引用自 preview捆。