3

我有一个看似非常简单的 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配置中是否有等价物？

4

2 回答 2

6

以下 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 配置为更高优先级以强制此处包含的所有依赖项都应保留在此块中。

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

为了强制将所有供应商依赖项从和块中拆分并重main用它们，您必须将cacheGroup 配置为：mainpreviewpreview

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

请注意，用于preview块的 cacheGroup 的优先级低于vendors确保所有main依赖项（也是依赖项中preview的依赖项）也从preview包中引用的优先级。

于 2018-03-18T05:59:01.430 回答
2

或者：

    splitChunks: {
      cacheGroups: {
          // We want all vendor (node_modules) to go into a chunk.
          vendors: {
            test: /[\\/]node_modules[\\/]/,
            name: "vendors",
            // Exclude preview dependencies going into vendors.
            // Currently undocument feature:  https://github.com/webpack/webpack/pull/6791
            chunks: chunk => chunk.name !== "preview"
          }
      }
    }
于 2018-07-06T15:32:27.123 回答