为cacheGroups添加名称后,webpack4的行为发生了变化

时间:2019-03-18 03:53:50

标签: webpack-4 webpack-splitchunks

将要捆绑的文件。

The files which are going to be bundled.

原始的webpack4配置splitChunks与官方文档相同。

module.exports = {
      mode: 'development',
      entry: { zzz: './src/index.js' },
      output: {
        path: path.resolve('./dist'),
        filename: '[name].bundle5.js',
        chunkFilename: '[name].chunk3.js'
      },
      module: {
        rules: [{
          test: /\.js$/,
          loader: 'babel-loader',
          exclude: /node_modules/
        }]
      },
      optimization: {
        splitChunks: {
          chunks: 'async',
          minSize: 30000,
          maxSize: 0,
          minChunks: 1,
          maxAsyncRequests: 5,
          maxInitialRequests: 3,
          automaticNameDelimiter: '~',
          name: true,
          cacheGroups: {
            vendors: {
              test: /[\\/]node_modules[\\/]/,
              priority: -10
            },
            default: {
              minChunks: 2,
              priority: -20,
              reuseExistingChunk: true
            }
          }
        }
      }  
    }

运行webpack4后,结果如下。 jQuery并未与moment和lodash捆绑在一起。

enter image description here

但是当我刚刚为cacheGroups添加名称时。

module.exports = {
      mode: 'development',
      entry: { zzz: './src/index.js' },
      output: {
        path: path.resolve('./dist'),
        filename: '[name].bundle5.js',
        chunkFilename: '[name].chunk3.js'
      },
      module: {
        rules: [{
          test: /\.js$/,
          loader: 'babel-loader',
          exclude: /node_modules/
        }]
      },
      optimization: {
        splitChunks: {
          chunks: 'async',
          minSize: 30000,
          maxSize: 0,
          minChunks: 1,
          maxAsyncRequests: 5,
          maxInitialRequests: 3,
          automaticNameDelimiter: '~',
          name: true,
          cacheGroups: {
            vendors: {
              name: 'sisi',
              test: /[\\/]node_modules[\\/]/,
              priority: -10
            },
            default: {
              name: 'tata',
              minChunks: 2,
              priority: -20,
              reuseExistingChunk: true
            }
          }
        }
      }  
    }

再次运行webpack4,结果如下。 jQuery捆绑了力矩和lodash。

enter image description here

让我最困惑的是,作为官方配置,为什么jquery是独立捆绑的,而不是带有矩和lodash的?

0 个答案:

没有答案