这是我参与「第五届青训营」伴学笔记创作活动的第22天
一、本节课重点内容
有关 Webpack 的讲解，除了使用与配置之外，还有重要的知识则是 Webpack 的扩展方式，在对基础的概念、本质、使用讲解完成后，本节课主要解读 Webpack 的扩展方式之一 —— Loader 。
课程重点内容归纳总结如下所示：
- Webpack 内容识别 - 只认识 JS
- 使用 Loader
- 认识 Loader ：链式调用与其他特性
- Loader 编写
- 常见 Loader
二、详细知识点介绍
问题:
Webpack只认识JS
- 为了处理非标准JS资源，设计出资源翻译模块Loader
- 用于将资源翻译为标准JS
- 首先，我们需要装入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之前，会先从左到右 调用loader上的pitch方法。如果pitch方法给出了一个结果， 那么pitch对应的那个normalLoader就不执行了。
- 可以通过enforce属性去改变执行顺序。
方式：
- 同步模式
- 异步模式
常见Loader：
站在使用角度，建议掌握这些常见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
三、总结
loader的本质上都是一个导出为函数的 JavaScript 模块，将资源文件或者上一个 loader 产生的结果传进去，经过编译转换把处理结果再输出去，是非常实用的模块的转换器，用来产生规范的JS代码。
在它里面也含有多种的方法支持我们的开发，减少了我们的工程量，加快了我们的打包速度。
