webpack如何抽离公共代码和第三方代码

// initial    对于异步导入的文件不处理
// async    对异步导入的文件处理
// all         全部chunk
optimization: {
  chunks: 'all',
    cacheGroups: {
    // 第三方模块
    vendor: {
      name: 'vendor', // chunk的名字
        priority: 1,    // 优先级
          test: /node_modules/,
            minSize: 0,    //公共模块限制大小
              minChunks: 1    // 最少复用多少次
    },
        // 公共模块
    common: {
      name: 'common',
        priorrity: 0,
          minSize: 0,    // 公共模块限制大小
            minChunks: 2    //  最少复用多少次
    }
  }
}

然后在chunks中可添加

const config = {
entry:{
index:path.join(srcPath,’index.js’),
other:path.join(srcPath,’other.js’)
},
plugins:[
new HtmlWebpackPlugin({
template:path.join(srcPath,’index.html’),
filename:’index.html’,
// chunks 表示该页面要引用哪些chunk 即上面的 index 和 other
chunks:[‘index’]
}),
new HtmlWebpackPlugin({
template:path.join(srcPath,’other.html’),
filename:’other.html’,
chunks:[‘other’]
})
]
}