Webpack 知识体系| 青训营笔记

81 阅读1分钟

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

课程重点

  • 为什么需要使用 Webpack

  • Webpack 打包核心流程:Entry => Dependencies Lookup => Transform => Bundle => Output

  • Loader 组件应用与开发原理

  • Plugin 组件应用与开发原理

  • Webpack 学习路径:入门 => 进阶 => 大师

详细知识点介绍

[新手向] Webpack 关键知识点

为什么需要使用 Webpack

image.png

image.png

image.png

什么是webpack

image.png

image.png

image.png

使用webpack

image.png

image.png

image.png

image.png

image.png

image.png

webpack配置官方文档

image.png

image.png

image.png

image.png

css-loader

Webpack 原理系列七:如何编写loader

style-loader

image.png

image.png

image.png

image.png

babel-loader

babel官网

preset-env

preset-react

preset-typescript

image.png

image.png

image.png

html-webpack-plugin

image.png

image.png

image.png

Webpack 原理系列十:HMR 原理全解析

image.png

image.png

image.png

image.png

image.png

awesome-webpack-4plus

深入浅出webpack

Survivejs - webpack book

进阶-理解loader

image.png

image.png

image.png

image.png

webpack原理七:如何编写loader

image.png

image.png

image.png

理解插件

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

webpack插件架构深度讲解

万字总结-一文吃透webpack核心原理

image.png

线上地址

学习方法

image.png

image.png

引用参考

Webpack 知识体系