webpack 相关的一些问题

刺骨的言语ヽ痛彻心扉 2022-12-04 10:58 195阅读 0赞

### 1、webpack是什么？ ###

`webpack`，一个模块打包器。它把项目中的所有资源js/css/html/.vue/less/img 等等都视为一种资源，每个资源文件都是一个模块。webpack根据每个模块之间的依赖关系将所有的模块打包起来。

***webpack的核心概念*** 入口entry、加载器loader、插件plugin和出口output。

###### 1.1 入口 `entry` ######

> 入口就是告知webpack从哪里开始打包文件

###### 1.2 加载器`loader` ######

> webpack将所有资源（js/html/css/img等等）都视为模块。但webpack本身能处理的只有JavaScript。因此需要通过loader将其他资源进行处理转换为模块，让webpack可以根据依赖关系将其打包。  
> loader 可以简单粗暴的理解为 ”翻译器“，loader让webpack有了加载、解析、打包非JavaScript文件的能力，处理对应的文件时需要手动安装对应的loader

###### 1.3 插件 `plugin` ######

> 插件plugin，它可以扩展webpack的功能，让webpack具有更大的灵活性。在webpack运行的生命周期中会广播出许多事件，而plugin会监听这些事件，在合适的时机改变输出结果

###### 1.4 出口 `output` ######

> weback的打包结果

### 2、和gulp 的区别 ###

***gulp***，前端自动化构建工具，强调的是工作流程。通过配置一系列的task（代码压缩、合并、编译、实时更新等）然后定义执行顺序，来让glup执行这个task，从而构建项目整个的开发流程。glup并不能把所有模块打包到一起，也不能构建模块之间的依赖关系

***webpack***，是一个模块打包器，强调的是前端模块化方案，它更侧重模块打包。webpack把项目中的所有资源都看做模块并构建模块之间的依赖关系，处理打包成符合生产环境部署的前端资源

### 3、webpack的构建流程 ###

webpack的运行流程是一个串行的过程，从启动到结束会依次执行以下流程

1.  `初始化参数`，从配置文件和shell语句中读取合并参数，得出最终的参数。
2.  `开始编译`，用上一步得到的参数初始化compiler对象，加载所有的配置的插件，执行对象的run方法，开始执行编译。
3.  `确定入口`，根据配置中的entry找出入口文件。
4.  `模块编译`，从入口文件出发，调用所有配置的loader对模块进行翻译，再找出该模块依赖的模块。再递归本步骤知道所有入口依赖都经过了本步骤的处理。
5.  `完成模块编译`，得到了每个模块被翻译后的内容以及他们之间的依赖关系。
6.  `输出资源`，根据入口和模块之间的依赖关系，组装成一个个包含多个模块的thunk，再把每个thunk转换成一个单独的文件加入到输出列表，这一步是可以修改输出内容的最后机会。
7.  `输出完成`，把文件内容写入到 配置好的输出路径和文件名

### 4、可视化分析工具 webpack-bundle-analyzer ###

> 1、安装 `cnpm install webpack-bundle-analyzer`  
> 2、配置，去网上找教程  
> 3、查看分析结果 `npm run build --report`  
> 4、浏览器 打开 127.0.0.1:8888 可以看到分析结果，面积越大、占用的时间、内容越多  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppYW5nTGl0dGxlQmFp_size_16_color_FFFFFF_t_70_pic_center]

### 5、热更新的原理 ###

> 改动代码之后，webpack会通过watch检测到文件的改动，并重新编译打包。但不会生成实际的文件，而是将其存储在内存中。内存和浏览器之间维持了一个webSocket，通过这个webSocket将结果发送到浏览器。从而实现页面的刷新。

### 6、怎么配置单页应用？多页应用呢？ ###

> 单页应用可以理解为webpack的标准模式，直接在entry中指定单页应用的入口即可。

> 多页面应用的话，可以使用webpack的`AutoWebPlugin`来完成简单的自动化构建，但是前提是项目的目录结构必须遵守他预设的规范

### 7、如何提高webpack的构建速度。。等等其他的 ###

以当前的本地项目为例，进行一下操作。看经过这一系列操作之后，打包时间能减少多少。。。。

###### 7.1 当前的构建时间 ######

> 为了显示构建时间，在`build.js`文件中，分别在构建前和构建后输出时间

// 开始构建
    console.time("build");
    
    //构建结束
    console.timeEnd("build");

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppYW5nTGl0dGxlQmFp_size_16_color_FFFFFF_t_70_pic_center 1]  
31秒以上。。。。。。。。。

###### 7.2 通过`externals`配置来提取常用库 ######

> 通过`external`配置来提取一些不怎么更新的第三方库，使之脱离webpack打包，减少打包时间但又不影响第三方库的使用。

修改`webpack.base.conf.js`

externals:{ 
       Vue:"Vue",
       VueRouter:"VueRouter",
       ElementUI:"ElementUI",
       Vuex:"Vuex"
    }

再次构建，时间确实减少了一点。。。。每次的构建时间都会不太一样，但基本固定在26s左右![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppYW5nTGl0dGxlQmFp_size_16_color_FFFFFF_t_70_pic_center 2]

###### 7.3 babel-loader开启缓存 ######

> babel-loader在执行的时候，可能会产生一些运行期间重复的公共文件。造成代码体积冗余，同时也会减慢编译效率  
> 修改`webpack.base.conf.js`

loader:"babel-loader",
    options:{ 
      cacheDirectory:true
    }

再次构建，时间好像没啥变化。。。。。。

###### 7.4 减少文件查找路径和查找时间 ######

> webpack打包的时候，会从入口文件处开始查找所有依赖的模块，如果能减少这个动作所需要的时间，，也就能减少构建时间了。。。。。。。  
> 在`resolve`中配置webpack如何找出模块所依赖的文件。

**7.4.1 resolve.modules 配置**

`resolve.modules`用于配置webpack去哪些目录下查找第三方模块， 直接指明 绝对位置，就避免了无谓的 先本目录在…/ 再根目录这样的层层查找  
通常情况下，不会去调整这个配置，但是如果可以确定项目中的所有第三方依赖模块都在根目录的node\_modules中，那么可以在node\_module之前配置一个确定的绝对路径

`resolve:{ modules:[path.resolve(__dirname,"node_modules")]}`

**7.4.2 resolve.extensions配置**

*  在导入没带后缀的文件时，webpack会自动带上或追尝试查找这些文件。`resolve.extensions`用于配置尝试的后缀列表
 *  导入文件时，尽量写上后缀
 *  出现频率高的文件后缀放在`resolve.extension`的前面
 *  `resolve.extension`列表项不要太多

###### 7.5 并行压缩 ######

> 当有多个JavaScript文件需要输出和压缩，开启并行压缩后，会把对多个文件的压缩工作分配给多个子进程。这样可以减少一点构建时间。。

new UglifyJsPlugin({ 
          uglifyOptions: { 
            compress: { 
              warnings: false
            }
          },
          parallel: true
        }),

。。。。并行压缩项目中默认设置了。。。。目前为止。。构建时间。。。。。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppYW5nTGl0dGxlQmFp_size_16_color_FFFFFF_t_70_pic_center 3]

###### 7.6 happypack ######

> webpack打包时，loader进行文件转换是相当耗时的。可以使用happypack，开启并行构建。缩短时间。  
> 具体的配置参考：[happypack配置][happypack]

好吧。。。。设置完之后，时间少了一丢丢。

###### 7.7 使用DllPlugin 和DllReferencePlugin预编译资源模块 ######

> 对于依赖的第三库，如vue、vuex、element-ui 等这些基本上不会改动的依赖（除非依赖版本升级），可以让他们和业务代码分开打包 。这样，第三方依赖就只需打包一次。之后webpack每次只需要打包业务代码。

**7.7.1 需要的插件**

1.  `DllPlugin`，该插件用于打包出一个个单独的动态链接库
2.  `DllReferencePlugin`，用于在主要的配置文件中引入动态链接库文件

**注意：** dll 和external在本质上是解决同一个问题 ：避免将某些外部依赖库和业务代码一起打包，而是在运行时提供这些依赖。。。。。***所以这次的优化并没有用这个***。。。。。。另外这两种方式各有优劣。

项目的构建时间每次都有几秒的起伏。。。。下面是经过上面一系列操作之后构建所用的最短时间。。。。少了10s。。。。。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppYW5nTGl0dGxlQmFp_size_16_color_FFFFFF_t_70_pic_center 4]

### 8、入口模块以及剩下的懒加载模块引用公共的模块时，代码会重复吗？webpack会处理吗？怎么处理 ###

1 、代码会重复

2、webpack可以处理

3、通过commonChunkPlugin插件处理这个问题，他会将公用模块同一抽取出来，形成一个新的common块，这样就避免了代码重复的问题了。。。。是啊，好强大啊，但是这样又出现一个新的问题，把公用的东西都提取出来了，会不会造成入口文件过大呢？  
`minChunks:3`重复模块大于3的全部抽出来。

所以啊，需要一个平衡

SplitCommonPlugin 就是为了解决CommonChunkPlugin的问题的。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppYW5nTGl0dGxlQmFp_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/2ddadbb0a7b24db7b665172760fe3dca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppYW5nTGl0dGxlQmFp_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/786ef7104ac74a128e724eb20854afc0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppYW5nTGl0dGxlQmFp_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/1cc1c6d657de44849fa12b639b226ba0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppYW5nTGl0dGxlQmFp_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/7da481f10b1e49458c3b09a43f3c4672.png
[happypack]: https://www.cnblogs.com/tugenhua0707/p/9562389.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppYW5nTGl0dGxlQmFp_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/e97e9da5d6a247248bc432cdf5a754dc.png