Webpack 知识体系| 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的第12天
Webpack 知识体系
一、Webpack 知识体系
1、什么是Webpack
webpack是一个模块捆绑器,适用于最大的单页Web应用程序,可以与单独的任务运行器捆绑在一起,它可以处理JavaScript,CSS等。webpack是前端开发人员工具集的一个很好的补充,使用webpack,Web开发更快,更高效,更有趣.
2、如何学习Webpack
入门应用
- 理解打包流程
- 熟练掌握常用配置项、Loader、插件的使用方法，能够灵活搭建集成Vue、React、Babel、Eslint、Less、Sass、图片处理等工具的 Webpack 环境
- 掌握常见脚手架工具的用法，例如:Vuo-cli、create-react-app、@angular/cli 进阶
- 理解Loader、Plugin机制,能够自行开发Webpack组件
- 理解常见性能优化手段,并能用于解决实际问题
- 理解前端工程化概念与生态现状 大师级
- 阅读源码,理解Webpack编译、打包原理,甚至能够参与共建
3、模块化一致性
- 多个文件资源合并成一个，减少http请求数
- 支持模块化开发 支持高级JS特性
- 支持Typescript、CoffeeScript方言
- 统一图片、CSS、字体等其它资源的处理模型
- Etc…
4、Webpack 核心概念
1、Entry：入口(Entry)指示 Webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。
2、Output：输出(Output)指示 Webpack 打包后的资源 bundles 输出到那里去，以及如何命名。
3、Loader：Loader 让 Webpack 能够去处理那些非 JavaScript 文件（webpack 自身只能理解JavaScript）
4、Plugins：插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。
5、mode：模式(Mode)指示 Webpack 使用相应模式的配置。
