这是我参与「第四届青训营 」笔记创作活动的第11天！今天学习《Webpack知识体系》对webpack知识不曾了解，今天学习整理有一个比较清晰的认识。

什么是Webpack

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

使用Webpack

• 安装
  • npm i -D webpack-cli
• 编辑配置文件
• 执行编译命令
  • npx webpack

核心流程————极度简化版

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

递归调用2、3，直到所有资源处理完毕

模块化+一致性

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

使用

• 关于webpack使用方法，基本都围绕“配置”展开，而这些配置大致可划分为两类：
  • 流程类：作用于流程中某个 or 若干个环节，直接影响打包效果的配置项
  • 工具类：主流程之外，提供更多工程化能力的配置项
• Babel、生成html
• 工具线
• HMR————Hot Module Replacement(模块热替换)
  • 开启 HMR
    • module.exports = { //... devServer:{ hot: true } };
  • 启动 Webpack
    • npx webpack serve
• Tree-Shaking
  • 模块导出了，但未被其它模块使用
  • Dead Code
    • 代码没有被用到，不可到达
    • 代码的执行结果不会被用到
    • 代码只读不写
    • ……
  • 开启tree-shaking：
    • 'mode: "production" '
    • 'optimization.usedExports: true'
• 其他工具：缓存、Sourcemap、性能监控、日志、代码压缩、分包……

Loader

• 为了处理非标准JS资源，设计出资源翻译模块————Loader
• 使用：
  • 安装Loader
  • 添加‘module’处理css文件
• 链式调用

今天的知识点很丰富，也是需要多加练习巩固。