浅谈webpack SplitChunksPlugin实用指南

splitChunks: {
chunks: 'all',
cacheGroups: {
vendors: {
test: /react/,
name: 'vendors'
}
}
}
}

我们去重写了vendors打包块，只打包匹配react的模块，所以达到了之前CommonsChunkPlugin的功能。

或者

// index.jsx
import React from 'react'
import ReactDOM from 'react-dom'
// webpack.config.js
entry: {
 indexA: path.join(__dirname, 'src/indexA.js'),
 vendor: ["react", "react-dom"]},
optimization: {
 splitChunks: {
  cacheGroups: {
   vendor: {
    name: "vendor",
    chunks: "initial"
   }
  }
 }
}

optimization.runtimeChunk

最后提一下runtimeChunk，通过

optimization.runtimeChunk: true

选项，webpack会添加一个只包含运行时(runtime)额外代码块到每一个入口。（译注：这个需要看场景使用，会导致每个入口都加载多一份运行时代码）

总结

webpack4的splitChunks功能是比较强大的，不过推荐还是使用默认模式，或者提取一下第三方库。