乐趣区

关于前端:梳理-Webpack-知识体系与学习资源推荐

jiezi

前言

对于 Webpack 之前曾经有写过几篇零散的文章:

  • 由零开始应用 Webpack 来搭建 React 我的项目
  • Webpack Sourcemap 回顾
  • 降级 Webpack5 实际
  • 如何编写一个 Webpack Loader
  • 如何编写一个 Webpack Plugin

而本文的内容则不会不再赘述各种 Webpack 细节，而是梳理一遍 Webpack 的相干常识（内容可能不算全，但也可当回顾 Webpack 了），并举荐看过的一些大佬的文章供学习浏览参考，心愿有助于大家深刻 Webpack 的学习。

本文从 Webpack 根底、优化、原理三个角度登程来进行梳理 Webpack 常识体系，以下是我整顿的一份 Webpack 常识体系思维导图：

本文也会同步于我的 Github

Webpack 外围根底

Webpack 根底的就不说了

我的项目配置

  • 由零开始应用 Webpack 来搭建 React 我的项目
  • 带你深度解锁 Webpack 系列(根底篇)

Loader

什么是 Loader

Loader 通常指 打包的计划 ，作用即是 让 webpack 领有了加载和解析⾮ JavaScript ⽂件的能⼒

  • Loader 常识分享：对于 Loader 比拟全的介绍

罕用的 Loader

  • babel-loader：将 ES6+ 语法转换为 ES5 语法
  • file-loader：把⽂件输入到⼀个指定目录中，在代码中通过绝对 URL 去引⽤输入的⽂件。
  • url-loader：能够在小于限度文件大小的状况下以 base64 的⽅式把⽂件内容注⼊到代码中去
  • css-loader：加载 CSS，⽀持模块化、压缩、⽂件导⼊等个性
  • style-loader：将解决好的 css 通过 style 标签的模式增加到页面上
  • less-loader：解析 Less 文件
  • sass-loader：将 SCSS/SASS 代码转换成 CSS
  • postcss-loader：扩大 CSS 语法，如能够配合 autoprefixer 插件主动补齐 CSS3 前缀

如何编写 Loader

Loader 其实就是一个函数，通过取得解决前的源内容，对原内容执行解决后，返回解决后的内容。

  • 如何编写一个 Webpack Loader：能够先看下我这篇，比较简单的入门
  • Webpack 原理系列七：如何开发 Loader：较为具体的编写

对于 pitch loader

  • 你不晓得的「pitch loader」利用场景

Plugin

什么是 Plugin

Plugin 是一个性能扩展器，webpack 的插件体系是一种基于 Tapable 实现的强耦合架构，能够在 webpack 运行到某个时刻的时候，帮咱们做一些事件

罕用的 Plugin

  • html-webpack-plugin：根据一个 HTML 模板，生成 HTML 文件，并把打包生成的 js 主动引入到这个 HTML 文件中
  • terser-webpack-plugin: 反对压缩 ES6，同时能够开启  parallel  参数，应用多过程压缩，放慢压缩
  • mini-css-extract-plugin: CSS 提取到独自的⽂件中, ⽀持按需加载
  • webpack-bundle-analyzer: 可视化 Webpack 输入文件的体积 (业务组件、依赖第三方模块)
  • speed-measure-webpack-plugin: 能够看到整个打包耗时、每个 Plugin 和 Loader 耗时

如何编写 Plugin

  • 如何编写一个 Webpack Plugin
  • Webpack 原理系列二：插件架构原理与利用：介绍了 Plugin 的外围库——Tapable

SourceMap

这个只是因为之前做过总结，所以也被我独自拎进去做一大部分了。

Sourcemap 是为了解决开发代码与理论运行代码不统一时造成无奈 debug 的问题，它是 源代码和指标代码出错地位的映射，Webpack4 的 Webpack5 的 devtool 配置项的关键词程序有点区别，留神下这个。

  • Webpack Sourcemap 回顾
  • 深入浅出之 Source Map

Webpack 优化

这个实用性比拟高，能够对我的项目进行各种优化。下面思维导图就列得不全，这个具体能够去看各种优化文章吧。

须要留神分别的是，有些优化形式在降级 Webpack4 或 Webpack5 的时候就过期了；其次，自身降级 Webpack5 就是个大优化，胜过你在低版本上各种优化搞法，愿没有 Webpack 配置工程师。

  • 降级 Webpack5 实际
  • 带你深度解锁 Webpack 系列(优化篇)
  • Webpack 配置全解析（优化篇）

Webpack 原理

Webpack 打包构建流程

  • [[万字总结] 一文吃透 Webpack 外围原理](https://juejin.cn/post/694904…)：Webpack 大佬的经典原理文章
  • 「搞点硬货」从源码窥探 Webpack4.x 原理
  • Webapck5 外围打包原理全流程解析

Webpack 懒加载

webpack 的懒加载理论借助了 ES6 的 import()语法和 jsonp。能够看下：

  • 一文搞懂 webpack 懒加载机制 —— webpack 系列
  • webpack 的异步加载原理及分包策略
  • 懒加载构建原理详解（模块如何被组建 & 如何加载）& 源码解读

热更新原理

热更新即是当对代码进行批改并保留后，webpack 将对代码从新打包，在不刷新浏览器的前提下就可能对页面进行更新。这部分原理上面三篇读完也差不多了：

  • Webpack HMR 原理解析
  • 搞懂 webpack 热更新原理
  • 轻松了解 webpack 热更新原理

Tree Shaking

Tree Shaking 实质上为了打消无用的 JS 代码，缩小加载文件体积。

实现前提：

  • 代码遵循 ES6 Module 标准

  • 将mode 选项为production

    • optimization.usedExports: true
    • optimization.minimize: true

举荐文章：

  • Webpack | TreeShaking 工作原理
  • Webpack 原理系列九：Tree-Shaking 实现原理

Webpack5

Webpack5 的次要变更：

  • 用持久性缓存来进步构建性能。
  • 用更好的算法和默认值来改良长期缓存。
  • 更好的 Tree Shaking 和代码生成来改善包大小。
  • 改善与网络平台的兼容性。
  • 在不引入任何破坏性变动的状况下，清理那些在实现 v4 性能时处于奇怪状态的内部结构。
  • 试图通过当初引入突破性的变动来为将来的性能做筹备，尽可能长时间地放弃在 v5 版本上。

Webpack5 还有个重大的个性就是模块联邦，它次要是为了更好的共享代码，让代码跨利用间利用 CDN 间接共享，不再须要本地装置 NPM 包、构建再公布，能够看下这篇：模块联邦浅析

举荐文章：

  • 阔别两年，webpack 5 正式公布了！
  • webpack5 上手指南

Webpack 零碎教程举荐

  • Hello Webpack
  • 史上最走心 webpack4.0 中级教程——配置之外你应该晓得的事  
  • 精通 Webpack 外围原理
退出移动版