关于Webpack

前言

webpack在面试中的频率还是挺高的，我有被问过以下问题：

1. 有用过webpack吗？用webpack做了什么？对webpack了解多少？
2. 用webpack时怎么去修改你的目录？修改入口文件的路径？
3. webpack的loader和plugin有什么区别？
4. loader的加载/运行机制？
5. 加载时，第三方包和自己的包哪个优先级更高?

webpack是什么？

webpack—>一切皆模块

webpack是一个前端项目自动化构建工具，也是一个静态模块打包器，当webpack处理应用程序时，会递归构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将这些模块打包成一个或多个bundle。

webpack 就像一条生产线,要经过一系列处理流程(loader)后才能将源文件转换成输出结果。 这条生产线上的每个处理流程的职责都是单一的,多个流程之间有存在依赖关系,只有完成当前处理后才能交给下一个流程去处理。

plugin就像是一个插入到生产线中的一个功能,在特定的时机对生产线上的资源做处理。 webpack 在运行过程中会广播事件,插件只需要监听它所关心的事件,就能加入到这条生产线中,去改变生产线的运作。

概括地说，webpack是一个打包/模块化的工具，可以通过loader转换文件，通过plugin扩展功能。

webpack的核心概念是：

1. 入口文件entry：一个可执行模块或库的入口文件
2. 出口文件output：告诉webpack将创建的bundles文件输出到哪里及如何命名这些文件，默认值为"./dist"
3. 文件转换器loader：比如把es6转换成es5，scss转换成css
4. 插件plugins ：扩展webpack的功能，在webpack构建生命周期的节点上加入扩展hook为webpack增加功能
5. 代码块chunk ：多个文件组成的一个代码块，例如把一个可执行模块和它所有依赖的模块组合成一个chunk，这体现了webpack的打包机制

webpack构建流程

从启动webpack构建到输出结果有以下过程：

1. 解析webpack配置参数，合并从shell传入和webpack.config.js文件里配置的参数，生产最后的配置结果；
2. 注册所有配置的插件，好让插件监听webpack构建生命周期的事件节点，以做出对应的操作；
3. 从配置的entry入口文件开始解析文件构建AST语法树，找出每个文件所依赖的文件，递归下去；
4. 在解析文件递归的过程中根据文件类型和loader配置找出合适的loader用来对文件进行转换；
5. 递归完后得到每个文件的最终结果，根据entry配置生成代码块chunk；
6. 输出所有chunk到文件系统；

Code Splitting

webpack的Code Splitting可以实现按需加载，它将文件分割成块(chunk)，我们可以定义一些分割点(split point), 根据这些分割点对文件进行分块, 并实现按需加载。
作用：

1. 第三方类库单独打包：由于第三方类库的内容基本不会改变，可以将其与业务代码分离出来，这样就可以最大化的利用浏览器的缓存机制，减少请求。
2. 按需加载：Webpack支持定义分割点，通过require.ensure进行按需加载。

Tree Shaking

webpack的Tree Shaking可以删除没有使用的代码，优化前端性能，提高构建速度。

tree-shaking是一种基于 ES Module 规范的 Dead Code Elimination 技术打包，在打包过程中检测工程中没有引用过的模块并进行标记，删除没有引用过的模块，提高构建速度，减少程序运行时间。

webpack的热更新（HMR）

热更新可以理解为模块的热替换，指在应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个应用。

配置：

const webpack = require('webpack')
module.exports = {
  // ...
  devServer: {
    // 开启 HMR 特性
    hot: true
    // hotOnly: true
  }
}
1
2
3
4
5
6
7
8
9

HMR并不像 Webpack 的其他特性一样可以开箱即用，需要有一些额外的操作，我们需要去指定哪些模块发生更新时进行HRM，如下代码：

if(module.hot){
    module.hot.accept('./util.js',()=>{
        console.log("util.js更新了")
    })
}
1
2
3
4
5

loader与plugin

loader

webpack默认只会处理js代码，但有时候我们也需要加载css、图片，还需要将ES6转成ES5，将TypeScript转成ES5，将scss、less转成css，将.jsx、.vue文件转成js文件等等，而对于webpack本身来说，它是不支持这些转化的，这时候就需要给webpack扩展相应的loader。

常用loader：

• file-loader：打包图片，打包字体图标。
• css-loader：和图片一样webpack默认不能处理CSS文件, 所以也需要借助loader将CSS文件转换为webpack能够处理的类型。解析css文件中的@import依赖关系,打包时会将依赖的代码复制过来代替@import。
• style-loader: 将css文件通过css-loader处理之后，将处理之后的内容插入到HTML的HEAD代码中。
• scss-loader：自动将scss转换为CSS。
• less-loader：自动将less转换为CSS

详细的讲解与配置，看这篇👉webpack中的loader

plugin

plugin：专注处理 webpack 在编译过程中的某个特定的任务的功能模块。
plugin 是一个扩展器，它丰富了 webpack 本身，针对 loader 结束后，webpack 打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听 webpack 打包过程中的某些节点，执行广泛的任务。

常用plugin：

• html-webpack-plugin：会在打包结束之后自动创建一个index.html, 并将打包好的JS自动引入到这个文件中。
• clean-webpack-plugin：在打包之前将我们指定的文件夹清空。应用场景每次打包前将目录清空, 然后再存放新打包的内容, 避免新老混淆问题，非官方功能。
• mini-css-extract-plugin：是一个专门用于将打包的CSS内容提取到单独文件的插件。前面我们通过style-loader打包的CSS都是直接插入到head中的。
• optimize-css-assets-webpack-plugin：压缩css代码。

更多plugin参考👉常用的18个webpack插件总结

loader与plugin的区别

插件（plugin）是 webpack 的支柱功能，用于扩展webpack的功能。当然loader也是变相的扩展了webpack ，但是它只专注于转化文件这一个领域。而plugin的功能更加的丰富，而不仅局限于资源的加载。一个插件就是一个类，可以在打包过程中的特定阶段执行。
从作用角度简单来讲：loader帮助我们加载文件资源，而plugins则是loader的延伸，并不限制于加载文件资源，同时也丰富了loader的功能。

webpack的其他常用功能/配置 参考👉webpack中常用loader及plugins（插件）

利用webpack优化前端性能

1. 代码压缩：在plugins里使用插件进行压缩。
   js压缩：利用terser-webpack-plugin
   css压缩：利用optimize-css-assets-webpack-plugin
2. 使用DLL进行分包
3. 使用路由懒加载

提高webpack的构建速度

1. 减少需要构建的文件或代码：HMR/缩小处理范围（合理利用export和include属性）/babel缓存/使用DLL进行分包（分包方便按需加载）
2. 多线程进行构建

看了很多文章才总结的这篇博客，包括以下：
webpack 面试题整理
webpack打包原理
Webpack介绍-一切皆为模块
什么是webpack？

在查阅webpack相关资料的时候，我偶然间看到知乎上的一篇关于webpack的“吐槽”，虽然有些观点比较“极端”，但我觉得作者有些见解还是挺好的。
Webpack到底有什么用，2021年我们还需要Webpack和Babel吗？

webpack与npm的关系

NPM和webpack的关系（转载）