Webpack知识体系 | 青训营笔记

江漓Jeffrey
86 阅读3分钟

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

本堂课课程大纲

    2. Webpack 的本质
    3. Webpack 定义解析
    4. Webpack 优势
    1. 流程类配置
    2. 处理 CSS
    3. 接入 Bable
    4. 生成 HTML
    5. 使用 Webpack - 工具线
    1. Webpack 内容识别 - 只认识 JS
    2. 使用 Loader
    3. 认识 Loader ：链式调用与其他特性
    4. Loader 编写
    5. 常见 Loader
    1. 插件定义解析
    2. 插件设计优势
    3. Loader 与插件的差异
    4. Webpack 学习方法推荐

什么是Webpack

前端项目由资源构成，png、js、vue、jsx等

旧时代手动去管理这些资源

image.png

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

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

使用Webpack

示例

  1. 安装
  2. 配置啊webpack.config.js
  3. 执行

核心流程——极度简化版

image.png

“配置”

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

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

流程类配置：

image.png

配置总览：

image.png

按使用频率:

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

处理CSS

只要在webpack.config.js文件中声明入口`entry`和产物出口`uotput`，就能通过`npx webpack`运行Webpack

  1. 安装

    npm add -D css-loader style-loader

  2. 添加moudule处理css文件(webpack.config.js中)

    module.exports = {
  //css处理器
  rules:[{
   test: /\.css/i,
   use:[
    "style-loader",
    "css-loader"
   ],
 }],
}

Loader就是Webpack里处理不同资源的组件

接入Babel（处理js）

Babel：把高版本js代码转成低版本js代码

  1. 安装依赖

    npm i -D @babel/core @babel/preset-env babel-loader

  2. 声明产物出口output

  3. 执行npx webpack

生成HTML

  1. 安装依赖（是个插件） npm i -D html-webpack-plugin

  2. 声明产物出口output

    module.exports = {
plugins: [new HtmLWebpackPlugin()] 
}

  3. 执行npx webpack

工具线

HMR

Hot Module Replacement——模块热替换：HMR是指当你对代码进行修改并保存后，webpack对代码重新打包，并将新的模块发送到浏览器端，浏览器通过替换旧的模块，在不刷新浏览器的前提下，就能够对应用进行更新。

  1. 开启HMR 使用webpack-dev-server，设置hot为true
  2. 执行npx webpack

Tree Shaking

Tree Shaking一树摇，用于删除Dead Code（没有用到的代码）

开启tree - shaking：

  • mode:"production"
  • optimization.usedExports: true

PS: 对工具类库如Lodash 有奇效

其他工具

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

理解Loader

Webpack只认识JS

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

链式调用

image.png

其他特性

image.png

特点：

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

理解插件

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

使用插件

  1. 安装
  2. new一个实例

学习方法

入门

  1. 理解打包流程
  2. 掌握常见脚手架工具的使用方法

进阶

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

大师级

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

参考

HMR理解 - 掘金

avatar
文章
阅读
粉丝