webpack优化配置
webpack优化配置主要分为两点： 1：开发环境性能优化 2：生产环境性能优化
开发环境行能优化
- 优化构建编译速度
- 优化代码调试
生产环境性能优化
- 优化打包构建速度
- 优化代码运行性能
从生产环境来分析
- _HRM(Hot module replacement)热模块替换 问题描述，上述配置的打包，当其中一个css文件或者几个js文件发生变化的时候，所有的文件都会打包。这会导致打包速度过于慢了，解决方法如下：
引入热模块替换：_HRM
作用：当一个模块发生变化的时候，只会重新打包这一个模块，而不是打包所有的模块，极大的提升了构建速度 使用方式：
但是也会存在一些问题，比如说： 样式文件默认可以使用HMR，因为使用了style-loader，内部实现了，但是js文件就不能使用HMR功能了，所以只能对非入口文件进行处理。html文件也不能使用HMR功能，解决方法：修改entry入口，把html文件也引进去。
解决js文件热更新的方式，其中只能处理除了入口文件以外的文件。
- 代码调试
source-map source-map是一种提供源代码到构建代码映射的技术，意思就是如果构建代码出错了，可以通过映射来追踪到源代码错误。
通常在开发环境下要求速度快，调试友好 速度快：eval>inline>cheap
调试更友好：source-map>cheap-module-source-map>cheap-source-map
最终在开发环境的话，选择devtool:'source-map'
生产环境：源代码要不要隐藏，调试要不要友好
最终的选择是source-map
devtool:'source-map'
- 生产打包构建速度
在所有的loader外边用oneof包一下，这样就会解决打包把所有的文件都过一遍这种情况，因此我们要做的是，所有的文件只匹配一次，但是也会存在一个问题，就是同一个文件只会匹配其中的一个laoder，所以把eslint拿出来放外边就可以了。
- 缓存
问题描述：当修改很多文件的时候，可以把文件存取在缓存中，当其他文件没有被修改的时候，直接从缓存中去读取 主要是分为了babel缓存和文件缓存
- bable缓存如下
- 文件缓存如下：
hash：每次webpack打包是都会生成唯一的一个值
问题：因为js和css同时使用一个hash值，如果重新打包，会导致所有的缓存失效（只更改一个文件也会）；
chunkhash：根据chunk生成的hash，如果打包来源于同一个chunk，那么hash就是一样的，
问题：因为js和css同属于同一个chunk，所以js和css的hash的值还是一样的
contenthash：根据文件内容生成的hash值，不同的文件hash值不一样。
做法：直接去修改文件名字就可以了
- tree-shaking
tree-shaking:是用来去除无用代码的 前提：1：必须使用es6模块化，2：开启production环境 作用：减少代码体积 在package.json中配置
上述可能存在的问题是把css代码，还有其他没有用上的代码给摇没了，这个时候就需要配置一下
- codesplit
代码分割：把打包的代码进行分割，来实现按需加载
- 懒加载和预加载
主要是通过写在js文件里边，当需要的时候再去加载
其中红框框圈中的部分，如果是预加载的话写入注释并且吧webpackPrefetch设置为true即可。
- pwa
离线也可以访问的技术使用如下：
- 下载插件workboxwebpackplugin
- 使用插件
- 在js代码中使用
如果使用成功了，就可以离线加载页面了
- 多进程打包
开启多进程打包是需要时间消耗的，所以只有工作时间消耗比较长的时候，才需要多进程打包。进程开启需要的时间袋盖是6000ms，这个东西一般给babel来使用。
下载一个laoder，npm i thread-loader -D
如果要用多进程的话，再外边套一层就可以了，引入thread-loader，配置进程为2，以此来加载两个进程
