Webpack 4+配置

Question

尝试创建迁移指南中建议的commonsChunkPlugin翻译。

我从vue-cli生成的块中得到了这个：

plugins: [ new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  minChunks (module) {
    // any required modules inside node_modules are extracted to vendor
    return (
      module.resource &&
      /\.js$/.test(module.resource) &&
      module.resource.indexOf(
        path.join(__dirname, '../node_modules')
      ) === 0
    )
  }
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
  name: 'manifest',
  minChunks: Infinity
}),
// This instance extracts shared chunks from code splitted chunks and bundles them
// in a separate chunk, similar to the vendor chunk
// see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
new webpack.optimize.CommonsChunkPlugin({
  name: 'app',
  async: 'vendor-async',
  children: true,
  minChunks: 3
})

...

我已经翻译成了这个（这不起作用）：

optimization: {
 splitChunks: {
   cacheGroups: {
     vendor: {
          name: 'vendor',
          test: path.resolve(__dirname, "node_modules"),
          enforce: true,
          chunks: "initial"
     },
     manifest: {
          chunks: "initial",
          minChunks: Infinity,
          name: "manifest",
          enforce: true
     },
     app: {
          chunks: "initial",
          name: 'app',
          minChunks: 3
     }
   }
 }

}

但我不知道如何调试它。

编辑：在评论查询时，我已将所有内容转储到以下公开gist中。这是webpack 3的原始webpack配置，由vue-cli生成。我正在尝试迁移到webpack 4，但它会影响配置，例如 - commonsChunkPlugin不存在，以及其他更改。

Answer 1

我遇到了完全相同的问题，我在 node_modules 文件夹和 manifest.js 文件中提取了供应商文件，但是供应商异步所以我检查了 webpack 3 版本，构建了它，并且块没有区别，所以我跳过供应商异步部分，我希望它会有所帮助

  optimization: {
    runtimeChunk: {
      name: 'manifest'
    },

      splitChunks: {
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/].*\.js$/,
            name: 'vendor',
            chunks: 'initial',
            enforce: true,
          }
        }
      }
    }