这是我参与「第四届青训营 」笔记创作活动的第15天
为什么要学习Webpack?
- 这是前端工程化的工具
- 提高竞争力
- 高阶前端必经之路
什么是webpack
本质上是一种前端资源编译、打包工具
使用Webpack
配置总览
关于webpack的使用方法，基本都围绕“配置”展开，而这些配置大致可划分为两类:
- 流程类:作用于流程中某个或若干个环节，直接影响打包效果的配置项
- 工具类:主流程之外，提供更多工程化能力的配置项
组件loader
Loader 是一个带有副作用的内容转译器,是webpack中提供了一种处理多种文件格式的机制，因为webpack只认识JS和JSON，所以Loader相当于翻译官，将其他类型资源进行预处理。
loader 加载器的作用: 协助 webpack 打包处理特定的文件模块,比如:
- css-loader 可以打包处理 '.css' 相关的文件
- less-loader 可以打包处理 '.less' 相关的文件
- babel-loader 可以打包处理 webpack 无法处理的高级JS语法
如何编写loader
这里可以参考老师的一篇博客 [mp.weixin.qq.com/s/TPWcB4MfV…]
babel
webpack 只能打包处理一部分高级的 Javascript 语法,对于一些 webpack 无法处理的高级 js 语法,需要借助于 babel-loader 进行打包处理
插件plugin
为什么需要插件？
从图中看到这是一个特别复杂的过程,那么:
新人需要了解整个流程细节，
上手成本高功能迭代成本高,牵一发动全身
功能僵化,作为开源项目而言缺乏成长性等等
心智成本高=>可维护性低=>生命力弱 因此使用插件
插件架构精髓:对扩展开放,对修改封闭
