这是我参与「第四届青训营 」笔记创作活动的第26天

Webpack

为什么要学习Webpack

• 理解前端“工程化”概念/工具/目标
• 一个团队总要有那么几个人熟悉Webpack，某种程度上可以成为个人的核心竞争力
• 高阶前端必经之路

什么是Webpack

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

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

Webpack打包核心流程

• 安装

• 编辑配置文件

• 执行编译命令

• 模块化+一致性
  • 多个个文件资源合并成一个，减少http请求次数
  • 支持模块化开发
  • 支持高级JS特性
  • 支持 Typescript、CoffeeScript方言
  • 统一图片、CSS、字体等其它资源的处理模型
  • Etc……
• 关于Webpack的使用方法，基本都围绕“配置”展开，而这些配置大致可划分为两类：
  • 流程类：作用于流程中某个 or 若干个环节，直接影响打包效果的配置项
  • 工具类：主流程之外，提供更多工程化能力的配置项
• 配置总览
  • ‘entry/output’
  • ‘module/plugins’
  • ‘mode’
  • ‘watch/devServer/devtool’

Loader组件

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

• less-loader : 实现less => css的转换
• css-loader : 将CSS包装成类似module.exports = "${css}"的内容,包装后的内容符合JavaScript语法
• style-loader ： 将css模块包进require语句，并在运行时调用injectStyle等函数将内容注入到页面的style标签 loader其他特性
• 链式执行
• 支持异步执行
• 分normall、pitch两种模式

常见Loader

Plugin组件

钩子的核心信息

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