Lecture13 Webpack 知识体系 ｜ 青训营笔记

用户8147561885610
56 阅读4分钟

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

13.1 为什么学习webpack

  • 理解前端“工程化”的概念、工具、目标
  • 熟悉webpack可以解决项目问题
  • 学习webpack可以提升核心竞争力，进而成为成熟前端

13.2 什么是webpack

  • 前端项目由资源构成，旧时代在页面管理资源文件，操作繁琐也影响了项目升级
  • 于是出现了很多的工程化工具解决这些问题，webpack就是其中一个
  • webpack：一个前端资源的编译、打包工具，将资源打包成Bundle，有广泛的支持

13.3 webpack的用法

一个示例

安装webpack及其命令行

npm i -D webpack webpack-cli

编辑配置文件webpack.config.js，添加必要信息

  • entry：入口目录
  • output：出口，可指定文件名和路径

编译

npx webpack
  • 原先的import会变成webpack_require
  • 多个文件合并为一个

核心流程

  1. 入口处理，从entry开始启动编译
  2. 依赖解析，根据require和import寻找依赖
  3. 资源解析，根据module配置将非js资源转译为js
  4. 重复2~3直到所有依赖递归处理完毕
  5. 资源合并打包，插入运行时代码，优化代码，输出最终文件

模块化+一致性

  • 资源合并，减少请求数
  • 支持模块化
  • 支持高级js特性，ts等
  • 统一资源处理模型

webpack的使用

  • webpack的使用基本围绕配置展开，配置大致分两类
    • 流程类：作用于流程中的一个或多个环节，直接影响打包效果
    • 工具类：在主流程之外提供更多工程化能力

流程类配置

  • 启动
    • entry：项目编译入口
    • context：运行时的启动目录
  • 解析：resolve, externals
  • 转译：module
  • 后处理：optimization, mode, target

工具类配置

  • 开发效率类
  • 性能优化类
  • 日志类
  • 其它

基本配置

  • entry
  • output
  • mode：production默认，会压缩代码，还可以选development

引入css

  • 在js文件中import样式表
  • 需要定义loader处理
  • 在config里面，添加module
module: {
  rules: [{
    test: /\.css$/,
    use: ['style-loader', 'css-loader']
  }]
}
  • 表明对于css文件，使用style-loader和css-loader
  • 编译时会插入相应的运行时代码

接入babel

  • babel是一个代码转译工具，将高版本的js代码转成低版本的
  • 安装@babel/core, @babel/present-env, babel-loader
  • 在config中使用loader
module: {
  rules: [{
    test: /\.js$/,
    use: [{
      loader: 'babel-loader',
      options: {
        presents: [
          ['@babel/present-env']
        ]
      }
    }]
  }]
}

生成HTML

  • 安装依赖htmp-webpack-plugin
  • 在config添加plugins
plugins: [new HTMLWebpackPlugin()]
  • 要修改生成HTML的一些特性，可以指定此插件的参数

HMR模块热替换

  • 使修改后的代码保存后能立刻显示到网页
  • config添加devServer
devServer: {
  hot: true
}
  • 运行使用npx webpack server
  • 同时添加watch: true监听保存动作

Tree-Shaking删除未使用代码

  • ci=onfig添加optimization
optimization: {
  usedExports: true
}
  • 在production模式下生效
  • 对工具类库有奇效

13.4 理解loader

  • loader用来进行内容转换，核心功能就是非js资源转换为js
  • 因为webpack只支持js
  • 一般流程：装包，在module引入

例子：引入less文件

  • 需要引入css-loader, less-loader, style-loader
  • 配置后，样式代码被转换为js字符串
  • less-loader：less转换为css
  • css-loader：css包装成符合js语法的字符串
  • style-loader：css包进require，运行时将样式内容注入代码
  • 三者其实是链式调用关系，单一模块职责单一（高内聚）

loader的特性

  • 链式执行
  • 支持异步执行
  • 分normal, pitch模式

loader的内容

  • 三个参数：source（源码或者是处理到一半的代码），sourceMap（可选参数），data（可选参数）
  • 返回值：字符串，处理后的代码
  • 当然，一个loader可以完全不修改源代码，只是查看代码（比如ESLint）

常见loader

QQ图片20230209140704.png

13.5 理解插件

  • 插件架构精髓：对扩展开放，对修改封闭
  • webpack本身很多功能也是通过插件实现的
  • 基本流程：安装、引入（通过创建新实例引入）

详解插件源码

  • 插件围绕钩子展开：在进行到某个步骤的时候，执行钩子
  • 传入参数是当时的上下文信息
  • 插件通过上下文参数的一些接口实现交互

13.6 webpack学习方法

  • 入门应用
    • 理解打包流程
    • 可以掌握常用配置项、loader、插件
    • 能搭建出符合需求的开发环境
    • 掌握知名脚手架工具用法
  • 进阶
    • 理解loader、plugin机制，会自己写webpack组件
    • 掌握常见性能优化手段
    • 理解前端工程化概念和生态现状
  • 大师级
    • 能阅读webpack源码
    • 理解webpack原理
    • 甚至能参与共建

QQ图片20230209142723.png

avatar
文章
阅读
粉丝