webpack打包生成的map文件_一站式搞明白webpack中的代码分割

上次分析到通过devtool的配置项来设置source map，在线上环境可以通过设置成cheap-module-source-map来生成单独的map文件，但是map文件在线上环境会不会每次都加载呢？如果加载的话，会不会造成带宽和请求的浪费呢？

笔者也有这样的疑问，于是在网络上查了一下。后来才了解到，在浏览器中，只有在调试模式下才会自动下载map文件，平时线上环境的话，是不用担心这个问题的。

在使用webpack构建单页面应用时，为什么要进行代码分割？

1. 如果entry中只配置了一个入口，那么如果从这个入口文件开始引入的公共库的代码过大，打包出来会只有一个bundle文件。当浏览器端加载这样一个体积太大的bundle时就会造成加载过慢。

2. 通常来讲我们的公共库代码是不经常修改的。但是我们的业务代码是经常要修改的，如果打包到不同的bundle文件可以更好的利用浏览器的缓存，在浏览器端来复用之前的公共库的bundle文件。

那如何通过代码分割来优化呢？

在webpack3中可以通过CommonsChunkPlugin来进行代码分割，但是webpack4中，官方提倡使用SplitChunksPlugin这个插件，所以本次主要讲解的也是在webpack4中通过SplitChunksPlugin这个插件来实现代码分割的方法。

首先要先弄懂一个预备知识点，就是在webpack中，什么叫做chunk，什么叫做bundle？

下面这种图