这是我参与「第五届青训营 」伴学笔记创作活动的第11天
03进阶篇：理解Loader
问题：Webpack只认识JS
为了处理非标准JS资源，设计出资源翻译模块--Loader
用于将资源翻译为标准JS
使用Loader
- 安装Loader
- 添加'module'处理css文件
认识Loader：链式调用
- less-loader：实现less=>css的转换
- css-loader：将CSS包装成类似module.exports="${css}"的内容，包装后的内容符合JavaScript语法
- style-loader：将css模块包进require语句，并在运行时调用injectStyle等函数将内容注入到页面的style标签
认识Loader：其他特性
特点：
- 链式执行
- 支持异步执行
- 分normal，pitch两种模式
常见Loader
站在使用角度，建议掌握这些常见Loader的功能，配置方法
-
JavaScript
- babel-loader
- eslint-loader
- ts-loader
- buble-loader
- vue-loader
- angular2-template-loader
-
CSS
- css-loader
- style-loader
- less-loader
- sass-loader
- stylus-loader
- postcss-loader
-
HTML
- html-loader
- pug-loader
- posthtml-loader
-
Assets
- file-loader
- val-loader
- url-loader
- json5-loader
04进阶篇：理解插件
插件是什么？为了这么设计？
- 新人需要了解整个流程细节，上手成本高
- 功能迭代成本高，牵一发动全身
- 功能僵化，作为开源项目而言缺乏成长性
心智成本高=>可维护性低=>生命力弱
插件架构精髓：对扩展开放，对修改封闭
甚至，Webpack本身的很多功能也是基于插件实现的
理解插件
首先：插件围绕'钩子'展开
钩子的核心信息
- 时机：编译过程的特定节点，Webpack会以钩子形式通知插件此刻正在发生什么事情
- 上下文：通过tapable提供的回调机制，以参数方式传递上下文信息
- 交互：在上下文参数对象中附带了很多存在side effect的交互接口，插件可以通过这些接口改变
05学习方法
01入门应用
- 理解打包流程
- 熟练掌握常用配置项，Loader，插件的使用方法，能够灵活搭建集成Vue，React，Babel，Eslint，Less，Sass，图片处理等工具的Webpack环境
- 掌握常见脚手架工具的用法，例如Vue-cil，create-react-app，@angular/cli
02进阶
- 理解Loader，Plugin机制，能够自行开发Webpack组件
- 理解常见性能优化手段，并能用于解决实际问题
- 理解前端工程化概念与生态现状
03大师级
阅读源码，理解Webpack编译，打包原理，甚至能够参与共建
