webpack必学，webpack优化详解（持续更新）

首先我们来介绍几个概念

1webpack独立配置

因为wenpack不仅仅是打包的工具，它有着两种模式，一种是开发模式dev,一种是生产模式product

我们在配置的时候会按照需求不同，进行独立配置。会配置一个公共的，叫做webpack.base.confing.js，还有一个dev和peoduct的。使用配置时使用merge

当我们需要dev： base + dev
当我们需要product： base + product

2打包的流程

我们打包，输入命令npm run build，然后开始打包。其中的步骤
1使用clean-webpack-Plugin插件,清除之前生成的打包文件
2使用plugin,生成新的文件
3生成manifest.js文件，对打包前的src文件和打包后的bundle文件的映射关系进行记录，并且跟踪。并通过该文件来解析和加载引入的模块。（模块： 例如引入的css或者是js等）
4ventor.js,对第三方库进行抽离
5app.js页面的压缩文件

3sourceMap（开发体验优化）

报错时，用来显示源码中哪一个文件下，哪一行出现了错误。用来记录打包前源码的位置和打包后的位置映射关系。用于开发时报错。

4webpack-dev-serve（开发体验优化）

是我们前端的一个简单的web服务器，把我们的代码放在服务上，并对其进行监听。我们运行代码npm run dev或者是npm run start 的时候，本质上是开启了webpack-dev-serve服务

5HMR(热更新)（开发体验优化）

替换更新的代码，并进行监听

6tree shaking(自带的打包特性)（打包体积优化）

移除导出了，但没有引用的代码，减少打包的体积

7代码分离（打包体积优化）

8公共依赖抽离（打包体积优化）

9动态导入（打包体积优化）

10懒加载（性能优化）

当用户点击了，触发的时候调用js的时候再对其js文件进行加载

11缓存（打包速度优化）

当我们加载了资源之后，我们进行缓存，文件名中会加入hash值，当我们更新资源的时候，hash值改变。我们就会重新加载新的资源。

12缩小文件查找的范围（优化打包速度）

13使用DLLPlugin（优化打包的速度）

使用动态链接库，把第三方，不更新的包进行分离，单独打包之后，进行引入到webpack中。
需要理解DLLPlugin,我们就先要理解DLL的概念
DLL称为动态链接库，你可以把它看作函数的集合，当我们需要调用DLL其中的函数时，我们先引入DLL，之后得到函数的地址（饮用）。对函数直接进行调用。很好的诠释了动态，链接（地址），库这几个词。

**DLL文件中存放的是各类程序的函数(子过程)实现过程，当程序需要调用函数时需要先载入DLL，然后取得函数的地址，最后进行调用。**使用DLL文件的好处是程序不需要在运行之初加载所有代码，只有在程序需要某个函数的时候才从DLL中取出。另外，使用DLL文件还可以减小程序的体积。

14happyPack（优化打包的速度）

打包时，使用多进程，加快打包的速度。我们的js是单线程的，无法打破单线程的壁垒。但是我们的电脑是多核的，同时可以处理多个进程。所以使用多进程打包。

15parelleUginlifyPlugin（优化打包的速度）

使用多进程对js代码的解析ATS以及js代码的压缩

16打包性能可视化分析

优化分
1开发体验优化
2打包速度和体积优化

未完，待续中。。。。。。

最后附上大佬的解析文档：深入浅出webpack
官网文档： webpack文档