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

Webpack 定义解析

为什么学习

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

什么是Webpack

• 前端项目由资源构成
• 手动管理资源的缺点：繁琐
  • 依赖手工，比如有50个JS文件...操作，过程繁琐
  • 当代码文件之间有依赖的时候，就得严格按依赖顺序书写
  • 开发与生产环境一致，难以接入TS或JS新特性
  • 比较难接入Less、Sass等工具
  • JS、图片、cSS资源管理模型不一致
• Webpack：一种前端资源编译、打包工具
  • 多份资源文件打包成一个 Bundle
  • 支持 Babel、Eslint、TS、CoffeScript、Less.Sass
  • 支持模块化处理css、图片等资源文件
  • 支持 HMR＋开发服务器
  • 支持持续监听、持续构建
  • 支持代码分离
  • 支持Tree-shaking
  • 支持 Sourcemap

Webpack使用方法

• 基础用法

  

• 核心流程

  

• 模块化 + 一致性

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

• 配置

  

  • 流程类：作用于流程中某个or 若干个环节，直接影响打包效果的配置项

    

  • 工具类：主流程之外，提供更多工程化能力的配置项

• 使用

  • 基本

  

  • 处理CSS

  

  • 接入Babel

  

  • HMR：模块热替换

    • 写完代码浏览器上立刻更新

    

  • Tree-Shaking：树摇

    • 用于删除Dead Code
      • Dead Code：根本没用到的代码

    

  • 其他工具

    • 缓存
    • Sourcemap
    • 性能监控
    • 日志
    • 代码压缩
    • 分包

理解Loader

• 问题：Webpack只认识JS

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

• 链式调用

  

  

• 其它特性

  

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

• 编写loader

  

• 常用loader

  

理解插件

• 对扩展开放，对修改封闭

• 钩子的核心信息

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

• 学习方法