时间戳

首页 > 解决方案 > Webpack v4 - optimization.splitChunk 名称不正确

webpack - Webpack v4 - optimization.splitChunk 名称不正确

问题描述

我正在将 webpack 从 v3 迁移到 v4，并且对新CommonsChunkPlugin格式有一些问题。

当前mode设置为developmentall 时工作正常，输出：

vendor.js, shared.js, default.js, 0.js, 1.js, 等等等等。

但是，何时mode设置为production并且shared.js捆绑vendor.js包以数字命名，这意味着我不能再将它们包含在页面上。这些块用于遵循我需要的filename属性，output因为出于架构原因，哈希是由另一个步骤提供的。

我的配置如下：

...
output: {
   filename: !RELEASE ? '[name].js' : '[name].js',
   chunkFilename: !RELEASE ? '[id].js' : '[id]-[chunkhash:8].js',
   jsonpFunction: '__LIB__',
   publicPath: '/content/dist/'
}
...
splitChunks: {
   name: true,
   chunks: 'async',
   cacheGroups: {
      default: false,
      commons: {
         chunks: 'initial',
         name: 'shared',
         minChunks: 2,
         maxInitialRequests: 5,
         minSize: 0
      },
      vendor: {
         test: /[\\/]node_modules[\\/]/,
         name: 'vendor',
         enforce: true,
         chunks: 'all',
         minChunks: 1
      }
   }
}

谢谢

标签： webpack

解决方案

使用此插件找到了解决方案： https ://www.npmjs.com/package/webpack-chunk-rename-plugin

为某些块提供单独的命名规则，在我的例子中shared.js和vendor.js：

plugins: [
   new ChunkRenamePlugin({
      vendor: '[name].js',
      shared: '[name].js'
   }),
]

推荐阅读