webpack知识点总结-CSDN博客

本文链接：https://blog.csdn.net/baidu_39067385/article/details/119428908

webpack是什么？

webpack是一种前端资源构建工具，一个静态模块打包器。在webpack看来，前端的所有资源文件都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源。

webpack与gulp的区别是什么？

webpack与gulp最大的区别就是在于打包过程上有所不同

Grunt、Gulp 这类构建工具的打包过程是通过遍历源文件–>匹配规则–>打包，整个过程是基于文件流的打包方式且做不到按需加载。

webpack 是从入口文件开始，把相关模块引入通过加载模块–>解析模块–>打包，整个过程是基于模块化的打包方式且支持按需加载，同时还可以在执行过程中针对性的去做一些优化操作。

1.核心打包原理：

1）打包的主要流程如下：

需要读到入口文件里面的内容。

分析入口文件，递归的去读取模块所依赖的文件内容，生成AST语法树。

根据AST语法树，生成浏览器能够运行的代码

2. 常见的模块解析包

@babel/parser：将获取到的模块内容解析成AST（es6的）语法树
@babel/traverse: 遍历AST语法树
@babel/core @babel/preset-env：ES6的AST转化成ES5的AST
style-loader: 将css添加到DOM的内联样式标签style里
css-loader:允许将css文件通过require的方式引入，并返回css代码,(解析css文件内的css代码，将 CSS 转化成 CommonJS 模块，)
less-loader 处理less
sass-loader 处理sass
file-loader:分发文件到output目录并返回相对路径
url-loader:和file-loader类似，但是当文件小于设定的limit时可以返回一个Data Url
html-minify-loader 压缩HTML
babel-loader 用babel来转换ES6文件到ES5
raw-loader：加载文件原始内容（utf-8）
json-loader：加载 JSON 文件（默认包含）

3. 有哪些常见的Plugin？你用过哪些Plugin？

ignore-plugin：忽略部分文件
html-webpack-plugin：简化 HTML 文件创建 (依赖于 html-loader)
mini-css-extract-plugin: 分离样式文件，CSS 提取为独立文件，支持按需加载
clean-webpack-plugin: 目录清理
5.uglifyjs-webpack-plugin：不支持 ES6 压缩 (Webpack4 以前)
terser-webpack-plugin: 支持压缩 ES6 (Webpack4)
webpack-bundle-analyzer: 可视化 Webpack 输出文件的体积 (业务组件、依赖第三方模块)
HappyPack:HappyPack 能让 webpack 把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程。因此可以很大程度上优化打包速度。
DllPlugin:

4. loader 和 plugin 不同

loader 本质就是一个函数，是使wenbpack拥有加载和解析非js文件的能力,loader支持链式调用，从右至左执行，支持同步或异步函数
plugin ：基于事件流框架Tapable，可以扩展webpack的功能，使得webpack更加灵活。可以在构建的过程中通过webpack的api改变输出的结果

5. webpack构建流程

初始化参数，从配置文件和shell语句中读到的参数合并，得到最后的参数
开始编译：用合并得到的参数初始化complier对象，加载是所有配置的插件，执行run方法开始编译
确定入口，通过entry找到入口文件
编译模块，从入口文件出发，调用所有配置的loader对模块进行解析翻译，在找到该模块依赖的模块进行处理
完成模块编译，得到每个模块被翻译之后的最终的内容和依赖关系
输出资源，根据入口和模块之间的依赖关系，组装成一个个包含多个模块的chunk，在把每个chunk转换成一个单独的文件加载到输出列表
输出完成，确定输出的路径和文件名，把内容写到文件系统中
在以上过程中，webpack会在特定的时间点广播出特定的事件，插件在监听感兴趣的事件后会执行特定的逻辑，改变webpack的运行结果。

6. source map是什么？生产环境怎么用？

source map 是将编译、打包、压缩后的代码映射回源代码的过程。打包压缩后的代码不具备良好的可读性，想要调试源码就需要 soucre map。

map文件只要不打开开发者工具，浏览器是不会加载的。

7. webpack 热加载执行原理

HMR（Hot Module Replacement）是webpack一个重要的特性，当代码文件修改并保存之后，webapck通过watch监听到文件发生变化，会对代码文件重新打包生成两个模块补丁文件manifest（js）和一个（或多个）updated chunk（js），将结果存储在内存文件系统中，通过websocket通信机制将重新打包的模块发送到浏览器端，浏览器动态的获取新的模块补丁替换旧的模块，浏览器不需要刷新页面就可以实现应用的更新。

8. 文件监听原理

在发现源码发生变化时，自动重新构建出新的输出文件。

1）Webpack开启监听模式，有两种方式：

启动 webpack 命令时，带上 --watch 参数
在配置 webpack.config.js 中设置 watch:true
缺点：每次需要手动刷新浏览器

2）原理：轮询判断文件的最后编辑时间是否变化，如果某个文件发生了变化，并不会立刻告诉监听者，而是先缓存起来，等 aggregateTimeout 后再执行。

module.export = {
   
    // 默认false,也就是不开启
    watch: true,
    // 只有开启监听模式时，watchOptions才有意义
    watchOptions: