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

Question

我有一个看似相当直接的Webpack代码拆分设置,我无法迁移到Webpack 4.我有两个条目,称为main和preview.我想将初始代码拆分为vendor供应商模块中的一个块main,但我想保留preview为一个块.

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可以让我轻松完成我需要做的事情.Webpack 4的optimization.splitChunks配置是否有同等效力？

Answer 1

以下Webpack 4配置仅将main模块供应商依赖项拆分为单独的块.preview该块中剩余的其他依赖项.

{
    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));
                    }
                }
            }
        }
    }
}

除非我们将previewcacheGroup 配置为具有更高优先级,以强制执行此处包含的所有依赖项应保留在此块中,否则共享依赖项将包含在vendor bundle中.

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

为了强制拆分所有供应商的依赖关系main并从块main和preview块中重用它们,必须将previewcacheGroup 配置为:

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

请注意,preview块的cacheGroup 优先级低于vendors确保所有main依赖关系的依赖关系preview也从previewbundle中引用.