如何在 webpack 4/5 中配置 splitChunks 以获取单独的供应商文件？

问题描述

这是我的 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'],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) 它为它们创建动态名称

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript webpack webpack webpack webpack-4 webpack-5 webpack-splitchunks