3

这是我的 webpack 3 配置。


    function isVendorJS(module) {
      if (module.resource && (/^.*\.(css|scss)$/).test(module.resource)) return false
      return module.context && module.context.includes('node_modules')
    }

    const plugins = [
      new webpack.optimize.CommonsChunkPlugin({
        name: 'view-vendor',
        chunks: ['view'],
        minChunks: isVendorJS
      }),

      new webpack.optimize.CommonsChunkPlugin({
        name: 'config-vendor',
        chunks: ['configuration'],
        minChunks: isVendorJS
      }),

      new webpack.optimize.CommonsChunkPlugin({
        name: 'common-vendor',
        chunks: ['config-vendor', 'view-vendor'],
        minChunks: 2
      })
    ]

    return {
      entry: {
        view: 'some path',
        configuration: 'some path'
      }
    }

它的目标是从 2 个入口点获得 5 个文件：

  • 带有它使用的本地模块的入口文件 A
  • 带有它使用的本地模块的入口文件 B
  • 仅在 A 中使用的供应商文件
  • 仅在 B 中使用的供应商文件
  • 两者都使用的供应商文件

我还需要这些文件具有固定的名称，以便我可以将它们导入我的 HTML。

有一个简单的配置

splitChunks: {
  chunks: 'all'
}

几乎可以满足我的需要，除了 a）它将我的本地模块包含在“仅 A”和“仅 B”块中 b）它为它们创建动态名称

我搜索了几个小时，但找不到解决方案，也无法理解现在整个 chunks majic 是如何工作的，所以我寻求帮助。

4

0 回答 0