【webpack】中splitChunk的使用方法

適合在多入口打包中使用

const path = require('path')
const webpack = require('webpack')

module.exports = {
  entry: {
    a: './src/a.js',
    b: './src/b.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js',
  },
  optimization: {
    // async 異步(import()語法) initial(同步import xxx from 'xxx') all(所有)
    splitChunks: {
      chunks: 'initial'
    }
  }
}

a入口和b入口都引入了jquery，打包時也分別打包到了各自的模塊里面，那么我們可以把相同的模塊提取出來

 

 

還有一些參數，看到那個vendors單詞沒，默認在這里設置的

  optimization: {
    splitChunks: {
      chunks: 'initial',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        }
      }
    }
  },

嘗試改成其他名字

  optimization: {
    splitChunks: {
      chunks: 'initial',
      cacheGroups: {
        common: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        }
      }
    }
  },

出來的是這樣的

可以定義很多個規則

 

比如我們想react和react-dom打一個包，vue和vuex打一個包

  optimization: {
    splitChunks: {
      chunks: 'initial',
      cacheGroups: {
        vue: {
          test: /[\\/]node_modules[\\/](react|react-dom)/,
          priority: -1
        },
        react: {
          test: /[\\/]node_modules[\\/](vue|vuex)/,
          priority: -2
        }
      }
    }
  },

默認引入的node_modules提取的的公共文件叫做vendors命名

可以自定義處理不同模塊，要寫priority，默認是-10，按照數字大的處理。