1、Loader的作用
webpack可以自动解析js和json格式的文件，这个是webpack开箱即用的功能，那如果要解析其他类型的文件呢，比如一张图片？
前面我们讲过 Asset Module功能可以，而作为最常用的解析工具，loader也可以将这些非js的文件转化为有效的模块。
webpack允许我们使用loader来处理文件，loader是一个导出为function的node模块，说白了，loader就是一个函数function。可以将匹配到的文件进行一次转换，同时loader可以链式传递。
2、Loader和Plugin的区别
在之前的文章，我也简单的聊过Plugin的作用，而两者经常被用来作比较，我也容易搞混。
其实，但是他们是完全两个不同的东西：
Loaders（加载器）：是在打包构建过程中用来处理源文件的（JSX，Scss，Less…），一次处理一个Plugins（插件）：并不直接操作单个文件，它直接对整个构建过程其作用
这里，我在网上找到了一张还不错的图示，从上面也能看出，Plugins是直接对整个构建过程生效，而Loaders是作用于某个具体的源文件类型。
所以，在后续使用的过程中，大家就不要在搞混了。
3、Loader的使用方式
一般loader的使用方式分为三种：
3.1、webpack.config.js配置文件
一般情况下，我们通过使用webbpack.config.js配置文件的方式来加载引入各种loaders
module.exports = {
module: {
rules: [
{
test: /\.txt$/,
use: 'raw-loader'
}
]
}
}
其中test这个属性用来识别哪些文件被转换，use这个属性用来在转换的时候，定义用哪个loader来进行转换
3.2、命令行参数
第二种方式，就是通过命令行参数方式
webpack --module-bind 'txt=raw-loader'
3.3、内联
第三种方式，就是通过内联使用
import txt from 'raw-loader!./file.txt'
4、常用的Loader
处理样式的Loader：style-loader、css-loader、less-loader、sass-loader等
处理文件的Loader：raw-loader、file-loader、url-loader等
用于编译的Loader：babel-loader、coffee-loader 、ts-loader等
用于校验测试的Loader：mocha-loader、jshint-loader、eslint-loader等
比如下面的配置文件，可以匹配.scss的文件，分别经过sass-loader、css-loader、style-loader的处理。
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
use:[
{loader:'style-loader'},
{loader:'css-loader',options:{sourceMap:true,modules:true}},
{loader:'sass-loader',options:{sourceMap:true}}
],
或
use:['style-loader','css-loader','sass-loader']
exclude:/node_modules/
}
]
}
}
sass-loader转化sass为css文件，并且包一层module.exports成为一个js modulecss-loader则处理其中的@import和url()style-loader将创建一个style标签将css文件嵌入到html中，且该标签在head头里面
vue-loader、coffee-loader、babel-loader等可以将特定文件格式转成js模块，将其他语言转化为js语言和编译下一代js语言。
file-loader、url-loader等可以处理资源。file-loader可以复制和放置资源位置，并可以指定文件名模板，用hash命名更好利用缓存；url-loader可以将小于配置limit大小的文件转换成内敛Data Url的方式，减少请求。
raw-loader可以将文件已字符串的形式返回。
imports-loader、exports-loader等可以向模块注入变量或者提供导出模块功能，
比如 imports-loader（导入加载器）允许您使用依赖于特定全局变量的模块，这对于依赖全局变量$或this作为window对象的第三方模块非常有用。常见场景是：
- jQuery插件注入$，imports-loader?$=jquery
- 禁用AMD，imports-loader?define=false，等同于：var $ = require(“jquery”) 和 var define = false;
5、Loader的执行顺序
正常情况下，loader执行顺序遵循从右向左，从下到上的原则
1、数组方式使用（执行的顺序为倒序即 loader1 > loader2 > loader3）
module: {
rules: [
{
test: /\.js$/,
use: ["loader3", "loader2","loader1"],
},
],
},
2、多个rules方式（执行的顺序为倒序即 loader1 > loader2 > loader3）
module: {
rules: [
{
test: /\.js$/,
use: "loader3",
},
{
test: /\.js$/,
use: "loader2",
},
{
test: /\.js$/,
use: "loader1",
},
],
},
6、Loader的分类
一般情况下，loader分为 pre（前置）、normal、post（后置）、inline（行内，嵌在代码中的loader），这四大类（默认是normal），loader的执行顺序为：
pre（前置） > normal > inline（行内）> post（后置）
上面说loader的执行顺序是倒序，那如果我真的是希望强制更改loader3在 loader1之前执行就可以这么做（此时的执行顺序为 loader3 > loader1 > loader2）
module: {
rules: [
{
test: /\.js$/,
use: "loader3",
enforce:"pre" //增加了此行
},
{
test: /\.js$/,
use: "loader2",
},
{
test: /\.js$/,
use: "loader1",
},
],
},
inline loader的使用方式
console.log("hello")
let str = require("inline-loader!./a.js");
//这句话的意思就是把a.js的内容导入，并传递到inline-loader，然后require的是inline-loader处理后的结果
loader中可以使用的webpack提供的常用api
本博客参考：