这是我参与「第五届青训营」伴学笔记创作活动的第 14天

webpack是什么？

是一种前端资源编译、打包工具

webpack的特点

多份资源文件打包成一个Bundle支持
Babel、Eslint、TS、CoffeScript、 Less、Sass支持模块化处理css、图片等资源文件
支持HMR＋开发服务器
支持持续监听、持续构建支持代码分离
支持 Tree-shaking支持Sourcemap动

如何使用webpack?

webpack使用起来其实就是一个工具，几乎所有的操作都是在webpack.config.js文件中操作的。

1.示例

安装 npm i webpack webpack-cli 2.配置文件

3. 执行编译命令 npx webpack

打包的过程

入口处理
- 从entry的文件开始，启动编译流程
依赖解析
- 从entry文件开始，根据require or import等语句找到依赖资源
资源解析
- 根据module配置，调用资源转移器，将png、css等非标准JS资源转译为JS内容
资源合并打包
- 将转译后的资源内容合并打包为可直接在浏览器运行的JS文件（递归调用2、3直到所有资源处理完毕）

优点

多个文件资源合并成一个，减少http请求数
支持模块化开发
支持高级JS特性
支持Typescript、CoffeeScript方言
统一图片、css、字体等其它资源的处理模型
Etc. ..

关于Webpack的使用方法，基本都围绕配置"展开，而这些配置大致可划分为两类:

流程类:作用于流程中某个or若干个环节，直接影响打包效果的配置项
工具类:主流程之外，提供更多工程化能力的配置项

流程类配置

输入:entry,context
模块解析:resolve,externals
模块转译:module
后处理:optimization,mode,target

处理css

首先我们需要安装loader npm add -D css-loader style-loader

loader是一个函数，他把我们传入的文件转换成我我们需要的样子

工具线

HMR（模块热替换）

2.Tree-Shaking

Tree-shaking树摇，用来删除Dead Code，就是删除没有被用到的代码减轻文件体积。使用Tree-shaking

其它工具:

缓存
Sourcemap
性能监控
日志
代码压缩
分包

理解Loader

loader的作用？

为了处理非标准S资源．设计出资源翻译模块—— Loader 。用于将资源翻译为标准JS

链式调用的原理

less-loader:实现less => css的转换
css-loader:将CSS包装成类似module.exports = "$(css]"的内容，包装后的内容符合JavaScript语法
style-loader:将css模块包进require语句，并在运行时调用injectStyle 等函数将内容注入到页面的style标签

特性

链式执行
动支持异步执行
分normal、pitch两种模式

理解插件

插件是什么，为什么这么设计？

这是一个特别复杂的过程,那么∶

新人需要了解整个流程细节，上手成本高
功能迭代成本高，牵一发动全身
功能僵化,作为开源项目而言缺乏成长性
Blabla
心智成本高=>可维护性低=>生命力弱
插件架构精髓:对扩展开放，对修改封闭

插件是围绕着`钩子`展开的，而钩子的核心信息是:

时机:编译过程的特定节点，Webpack 会以钩子形式通知插件此刻正在发生什么事情;
上下文:通过tapable提供的回调机制，以参数方式传递上下文信息;
交互:在上下文参数对象中附带了很多存在side effect的交互接口，插件可以通过这些接口改变

总结与思考：

学完这节课，让我对webpack有了更深刻的认识和理解，对Loader，和插件的认识也更深刻了

Webpack 知识体系 | 青训营笔记