webpack|青训营笔记

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

一、课程知识要点：

1. 什么是webpack
2. 使用webpack
3. 怎么使用webpack？
4. 理解Loader
5. 理解插件

二、详细知识点介绍：

什么是webpack

什么是webpack

• 依赖手工，比如有50个JS文件…操作，过程繁琐
• 当代码文件之间有依赖的时候，就得严格按依赖顺序书写
• 开发与生产环境一致,难以接入TS或JS新特性
• 比较难接入Less、Sass等工具
• JS、图片、CSS资源管理模型不一致
• 这些都是旧时代非常突出的问题，对开发效率影响非常大。

2. 本质上是一种前端资源编译、打包工具

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

使用webpack

模块化+一致性

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

怎么使用webpack？

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

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

理解Loader

认识Loader—链式调用

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

其他特性

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

常见Loader

站在使用角度,建议掌握这些常见Loader的功能、配置方法

理解插件

理解插件

• 钩子的核心信息:

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

三、课后总结

详细讲述了webpack的基本内容，值得我们认真去学习。