这是我参与「第五届青训营」伴学笔记创作活动的第15天!
一、Webpack
为什么要学习 Webpack？
- 理解前端“工程化”概念、工具、目标；
- 一个团队总要有那么几个人熟悉 Webpack ,某种程度上可以成为个人的核心竞争力；
- 高阶前端必经之路
什么是 Webpack ？
本质上是一种前端资源编译、打包工具。
- 多份资源文件打包成一个 Bundle
- 支持 Babel 、Eslint 、TS 、CoffeScrlipt 、 Leas 、 Sass
- 支持模块化处理 css 、图片等资源文件
- 支持 HMR ＋ 开发服务器
- 支持持续监听、持续构建
- 支持代码分离
- 支持 Tree-shaking 支持 Sourcemap
- ...
Webpack 核心流程——极度简化版 （递归调用2、3，直到所有资源处理完毕）
优点：模块化 + 一致性
- 多个文件资源合并成一个，减少 http 请求数支持模块化开发
- 支持高级 JS 特性
- 支持 Typescript 、 CoffeeScript 方言
- 统一图片、 css 、字体等其它资源的处理模型 Etc .. .
如何使用 Webpack ？
关于 Webpack 的使用方法，基本都围绕“配置”展开，而这些配置大致可划分为两类:
- 流程类: 作用于流程中某个 or 若干个环节，直接影响打包效果的配置项
- 工具类: 主流程之外，提供更多工程化能力的配置项
使用 Webpack 还能进行其他操作，例如接入 Babel ，生成 HTML ，Tree Shaking 等
工具线
其它工具:
- 缓存
- Sourcemap
- 性能监控
- 日志
- 代码压缩
- 分包
- ...
二、理解 Loader
为了处理非标准 JS 资源，设计出资源翻译模块 —— Loader 用于将资源翻译为标准 JS 。
Loader 其它特点：
- 链式执行
- 支持异步执行
- 分 normal 、 pitch 两种模式
常用 Loader
- JavaScript
- babel-loader
- eslint-loader
- ts-loader
- buble-loader
- vue-loader
- angular2-template-loader
- CSS
- css-loader
- style-loader
- less-loader
- sass-loader
- stylus-loader
- postcss-loader
- HTML
- html-loader
- pug-loader
- posthtml-loader
- Assets
- file-loader
- val-loader
- url-loader
- json5-loader
链式调用
less-loader: 实现 less => css 的转换。 css-loader: 将 CSS 包装成类似 *module.exports = "${css}” *的内容，包装后的内容符合JavaScript语法。 style-loader: 将 css 模块包进 require 语句，并在运行时调用 injectStyle 等函数将内容注入到页面的 style 标签。
插件
理解插件需要从“钩子”开始，钩子的核心信息∶
- 时机∶ 编译过程的特定节点, Webpack 会以钩子形式通知插件此刻正在发生什么事情;
compier.hooks.compilation - 上下文: 通过 tapable 提供的回调机制，以 参数 方式传递上下文信息;
compilation等 - 交互: 在上下文参数对象中附带了很多存在 side effect 的交互接口，插件可以通过这些接口改变。
dependencyFactories.set
结尾
Webpack 的入门需要掌握以下几点：
- 理解打包流程；
- 熟练掌握常用配置项、Loader、插件的使用方法，能够灵活搭建集成 Vue 、React 、Babel 、Eslint 、Less 、Sass、图片处理等工具的 Webpack 环境；
- 掌握常见脚手架工具的用法，例如:Vue-cli、create-react-app、@angular/cli 。
再深入进阶需要掌握以下几点：
- 理解 Loader 、Plugin 机制,能够自行开发 Webpack 组件；
- 理解常见性能优化手段，并能用于解决实际问题；
- 理解前端工程化概念与生态现状。
最后宗师级别的可以做到流利阅读源码,理解 Webpack 编译、打包原理,甚至能够参与共建。
综上，学习 Webpack 的道路还很远，需要长期坚持下去呀！今天又是学习的一天🤣
