这是我参与「第五届青训营 」伴学笔记创作活动的第 17 天
为什么需要Loader
- Webpack 只认识JS 在页面引入css文件的话，
webpack无法识别，会报错：
为此，为了处理非标准Js资源，webpack设计出了资源翻译模块也就是Loader，用于将资源翻译为标准JS。
此时可以给项目安装Loader来处理非标准JS资源，例如css，less等：
使用Loader
- 安装loader
npm add-D css-loader style-loader less-loader
- 在配置中 添加
module处理css，less等文件
Loader的链式调用
- less-loader：实现less=>css的转换
- css-loader：将CSS包装成类似module.exports="{css}"的内容，包装后的内容符合JavaScript语法
- style-loader：将css 模块包进require 语句，并在运行时调用injectStyle等函数将内容注入到页面的style标签
Loader的特性
- 链式执行 任何一个pitch阶段有返回值的话都会中止后面的流程，方便用于做一些catch。
- 支持异步执行
- 分normal、pitch 两种模式： 运行一开始会先执行pitch阶段。
如何编写Loader
eslint-loader的index.js：
基本模板 suorce是源码内容，data是一些额外信息；
站在使用角度，建议掌握这些常见Loader的功能、配置方法：
什么是插件：
很多知名工具：VS Code、Web Storm、Chrome、Firefox Babel、Webpack、Rollup、Eslint Vue、Redux、Quill、Axios都设计了“插件”架构，
一个大型项目往往复杂且庞大：
一个新人去维护或者给一个大型项目添加新功能是一个特别复杂的过程：
- 新人需要了解整个流程细节，上手成本高
- 功能迭代成本高，牵一发动全身
- 功能僵化，作为开源项目而言缺乏成长性中Blabla
也就说不带插件功能的大型项目维护成本高：
心智成本高=>可维护性低=>生命力弱
而插件的精髓在于：对扩展开放，对修改封闭
可以开放的插件功能（修改方式）中添加功能或者说修改一些细节。
甚至，Webpack本身的很多功能也是基于插件实现的。
