乐趣区

关于javascript:建议收藏-Webpack-4-优秀学习资料合集

jiezi

集体订阅号不反对外链，倡议读者点击左下角“浏览原文”获取更好的浏览体验。

背景

最近在学习 Webpack 源码，前前后后输入了 6 篇原理剖析、工具分享类型的文章，过程中找到一些品质很高，值得一看的学习材料，所以熬夜整顿了一波，心愿对大家有帮忙。

收录的规定很简略：

  • 内容实用于 Webpack 4 以上
  • 不看点赞、阅读数，篇幅也能够很短，但内容必须详实，不能有显著偏误
  • 不求量不求全，但求涵盖利用、原理、工具等维度，可能给各个层级的同学带来新的常识

将来我会继续保护这份列表，十分欢送社区小伙伴们到我集体公众号 tecvan 投稿。

Webpack 根底

应用 Webpack 开发 Web 利用

  • 介绍 | Webpack 中文指南: 比拟根底比拟细的入门教程，很适宜初学者
  • 2020 年了, 再不会 webpack 敲得代码就不香了 (近万字实战): 掘金 3000 赞，十分详尽的利用指南，特地是最初性能优化那一块有很强的实际指导意义
  • webpack4 的 30 个步骤打造优化到极致的 react 开发环境，如约而至: 介绍 Webpack + React 开发环境搭建的方方面面，倡议读者按图索骥
  • How to use Webpack with React: an in-depth tutorial
  • webpack-contrib/awesome-webpack
  • petehunt/webpack-howto
  • Webpack 初学者教学课程 Part 1 – Webpack 简介
  • A mostly complete guide to webpack 5 (2020)

应用 Webpack 编写 npm 包

  • Let’s Write a JavaScript Library in ES6 using Webpack and Babel
  • 古代前端库开发指南系列 (二): 应用 webpack 构建一个库
  • [译] 基于 Webpack 和 ES6 打造 JavaScript 类库

应用脚手架

  • facebook/create-react-app: 疾速创立 React 利用脚手架工具
  • vuejs/vue-cli: 疾速创立 Vue 利用脚手架工具
  • tjx666/awesome-chrome-extension-boilerplate : 基于 React \& TypeScript \& Webpack 的 Chrome 扩大开发模板

Hello World

  • Webpack Examples：Webpack 官网提供的示例，涵盖大多数个性的用法
  • ruanyf/webpack-demos: 阮一峰老师的 Webpack 入门示例

Webpack 进阶

高级个性

  • Tree Shaking

    • Webpack 4 Tree Shaking 终极优化指南
    • Tree-Shaking 性能优化实际 – 原理篇
    • Tree-Shaking 性能优化实际 – 实际篇

  • 缓存

    • Webpack5 内置缓存计划摸索

  • Module Federation

    • webpack 5 ModuleFederationPlugin vue 我的项目初体验

如何编写 Loader

  • ✏️ loader 常识分享: 开展解说了 loader 的利用、品种、原理、执行形式等内容，品质很高
  • 【Webpack 进阶】Loader 深刻解析: 尽管浏览量跟赞都不多，但内容详尽，值得看一看
  • 手把手教你撸一个 Webpack Loader
  • 如何开发一个 Webpack Loader (一)

如何编写 Plugin

  • Webpack 案例 — vue-loader 原理剖析: 联合 vue-loader，实例剖析如何编写 Webpack 插件，特地剖析了 vue-loader 如何解析一份 SFC 中的三种内容；如何复用 Webpack 配置中的其它 Loader
  • 如何写一个 webpack 插件（一）

实现原理

  • [万字总结] 一文吃透 Webpack 外围原理
  • 了解 webpack 原理，手写一个 100 行的 webpack
  • Webpack HMR 原理解析 : 知乎高赞，十分具体的 Hot Module Replace 原理剖析文档
  • AST 与前端工程化实战

面试

  • 「吐血整顿」再来一打 Webpack 面试题: 掘金高赞，以面试题视角概要解释 Webpack 中的各个知识点
  • Webpack interview questions
  • webpack 中那些最易混同的 5 个知识点: 解说 Webpack 一些罕用但容易被忽视的配置项，对面试和日常利用都很有启发

系列连载

  • 范文杰 – 源码解析 Webpack(私货)

    • [万字总结] 一文吃透 Webpack 外围原理
    • [源码解读] Webpack 插件架构深度解说
    • 十分钟精进 Webpack：module.issuer 属性详解
    • 有点难的 webpack 知识点：Dependency Graph 深度解析
    • 有点难的知识点：Webpack Chunk 分包规定详解
    • 分享几个 Webpack 实用剖析工具
  • 深入浅出 Webpack: 应该是国内最详尽的 Webpack 书籍，从入门到利用，再到原理、工具都有介绍，十分值得动手
  • Webpack 5 常识体系: 一份拆解 Webpack 外围原理、架构、编译流程、loader、插件的在线常识图谱
  • 随笔列表第 6 页 – 书生小龙 – 博客园: 一系列 Webpack 源码剖析文章，每篇文章都针对源码某一个特地小的点开展来讲
  • Webpack Book from SurviveJS : 一本深入浅出 Webpack 利用、原理、工具等主题的在线书籍
  • 史上最走心 webpack4.0 中级教程 – 配置之外你应该晓得的事

  • 刘小夕 – 带你深度解锁 Webpack 系列

    • 带你深度解锁 Webpack 系列 (根底篇)
    • 带你深度解锁 Webpack 系列 (进阶篇)
    • 带你深度解锁 Webpack 系列 (优化篇)

  • 滴滴前端技术团队 – 比拟硬核的 Webpack 原理剖析系列文章，得静下心来缓缓看

    • 你不晓得的 webpack 动态文件生成过程
    • webpack 系列之七 - 文件生成
    • webpack 系列之七 - 附 dependencyTemplates 依赖模板
    • webpack 系列之六 chunk 图生成
    • webpack 系列之五 module 生成 1
    • webpack 系列之四 loader 详解 1
    • webpack 系列之三 resolve
    • webpack 系列之二 Tapable
    • webpack 系列之一总览

性能优化

  • Web Performance Optimization with Webpack
  • Webpack 4: mode and optimization
  • The 100\% correct way to split your chunks with Webpack
  • iamakulov/awesome-webpack-perf
  • Webpack 构建性能优化摸索
  • 开发工具心得：如何 10 倍进步你的 Webpack 构建效率
  • webpack Performance: The Comprehensive Guide
  • 彻底解决 Webpack 打包慢的问题
  • webpack 构建性能优化策略小结
  • 彻底解决 webpack 打包文件体积过大: 文章介绍 5 种常见的包体积优化办法，行文特地清晰
  • 玩转 webpack，使你的打包速度晋升 90\%
  • ESM vs Webpack 面向高性能构建的摸索
退出移动版