浅谈Webpack等构件的学习

coderwhy的视频学习笔记

Webpack是什么？

webpack定义

wepack是一个静态的现代的JS程序模块打包工具。

前端开发的复杂化

随着前后端分离，前端页面已经变得越来越复杂了：

1. 需要通过模块化的方式来开发
2. 使用高级特性来加块开发效率或者安全性，比如通过ES6+、TypeScript开发脚本逻辑，通过sass、less等方式来编写css样式代码
3. 需要监听文件的变化来实时反应到浏览器上来提高开发效率
4. 开发完成后需要将代码进行压缩、合并以及其他相关优化

前端的三个框架

Vue、React、Angular创建项目使用的脚手架都是基于webpack

为什么要学习Webpack？

1. 日常工作当中，比如开发Vue、React、Angular等项目的过程中我们需要一些特殊的配置，比如给某些特殊的目录起别名，让我们的项目支持sass、less等预处理器，希望在项目中手动的添加TypeScript的支持，都需要对webpack进行一些特殊的配置工作。
2. 在日常工作之外，如果希望在原有的脚手架上定制一些自己的特殊配置性能，比如：安装性能分析工具、使用gzip解压代码、引用cdn的资源、公共代码抽取等操作，甚至需要编写属于自己的loader和plugin
3. 对想要在前端领域进阶称高级前端开发工程师，甚至是架构师的人来说，webpack等构建工具是必须学习的，包括一些高级特性和原理

如何系统学习Webpack？

1. 官方文档
2. 看书学习
3. 脚手架中配置
4. 视频课程

学习Webpack能收获什么？

---

如果我的文章能帮你节约20秒，就请你为我的文章点个赞吧！