Webpack知识体系 | 青训营笔记

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

什么是 Webpack

本质上是一种前端资源编译、打包工具 - 多份资源文件打包成一个 Bundle

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

核心流程

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

使用 Webpack

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

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

理解 Loader

问题：Webpack 只认识JS

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

链式调用

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

理解插件

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

很多知名工具，如：

• VS Code、Web Storm、Chrome、Firefox
• Babel、Webpack、Rollup、Eslint
• Vue、Redux、Quill、Axios

等等，都设计了所谓“插件”架构，为什么？ 这是一个特别复杂的过程，那么：

• 新人需要了解整个流程细节，上手成本高
• 功能迭代成本高，牵一发动全身
• 功能僵化，作为开源项目而言缺乏成长性
• Blabla

心智成本高 => 可维护性低 => 生命力弱 插件架构精髓：对扩展开放，对修改封闭

甚至，Webpack 本身的很多功能也是 基于插件实现的