Webpack 知识体系|青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第15天，下面跟我一起看看青训营Webpack部分讲了什么吧~

1.什么是 Webpack

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

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

2.Webpack打包核心流程

1. 入口处理：从'entry' 文件开始，启动编译流程；

2. 依赖解析：从'entry'文件开始，根据'require' or import' 等语句找到依赖资源；

3. 资源解析：根据module' 配置，调用资源转移器，将png、css等非标准JS资源转译为JS内容；

4. 资源合并打包：将转译后的资源内容合并，打包为可直接在浏览器运行的JS文件；

3.Webpack使用方法

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

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

按使用频率（配置）：

• entry/output
• module/plugins
• mode
• watch/devServer/devtool

4.Webpack的问题：Webpack 只认识 JS

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

5.Loader

1)认识Loader：链式调用

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

2)Loader的其他特点

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

6.理解插件

插件架构精髓：对扩展开放，对修改封闭

7.学习方法

1. 入门应用

   • 理解打包流程
   • 熟练掌握常用配置项、Loader、插件的使用方法，能够灵活搭建集成 Vue、React、Babel、Eslint、Less、Sass、图片处理等工具的 webpack 环境
   • 掌握常见脚手架工具的用法，例如：Vue-cil、create-react-app、@angular/cli

2. 进阶

   • 理解 Loader、Plugin 机制，能够自行开发 Webpack 组件
   • 理解常见性能优化手段，并能用于解决实际问题
   • 理解前端工程化概念与生态现状

3. 大师级

   • 阅读源码， 理解 Webpack 编译、打包原理，甚至能够参与共建

8.知识点总结