一、简介
webpack本身只能处理js模块，Loader可以理解为模块和资源的转换器，它本身是一个函数，接受文件作为参数，返回转换的结果。因此，我们就能通过require来加载任何类型的模块和文件。
特点：
（1）Loader可以通过管道方式链式调用，每个loader可以自愿转换为任意格式传递给下一个loader，但最后一个loader必须返回js；
（2）同步或异步执行；
（3）运行与node.js环境中
（4）可以通过npm进行安装
（5）可以接受参数，以此来传递配置项给loader；
（6）loader可以通过文件扩展名（或正则表达式）绑定给不通类型的文件
命名规则：按照惯例，而非必须，loader 一般以
xxx-loader 的方式命名，xxx 代表了这个 loader 要做的转换功能，比如 json-loader。二、安装及使用方法
::安装
npm install css-loader style-loader
在引用 loader 的时候可以使用全名
json-loader，或者使用短名 json。使用方法：
（1）在require()引用模块时添加
例如： 在页面中引入一个 CSS 文件 style.css，首页将 style.css 也看成是一个模块，然后用
css-loader 来读取它，再用 style-loader 把它插入到页面中。//载入style.css
require('!style-loader!css-loader!./style.css');
（2）在webpack全局配置中绑定
详见常用loader介绍。
（3）通过命令行的方式使用
在引入时直接使用：
require('./style.css');
在打包执行时：
webpack entry.js build.js --module-bind 'css=style-loader!css-loader'
::有些环境下可能需要使用双引号
webpack entry.js bundle.js --module-bind "css=style-loader!css-loader"
三、常用loader
css-loader 处理css中路径引用等问题
style-loader 动态把样式写入css
sass-loader scss编译器
less-loader less编译器
postcss-loader scss再处理
1、js处理
{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'stage-2', 'react']
}
}
（1）babel-loader 转码器
Babel是一个转码器，可以将ES6语法转换为ES5语法，这样就可以用ES6编写程序，而不用担心现有环境是否支持。
例如：
//转码前
arr.map(item => item + 1); //箭头函数
//转码后
arr.map(function(item){
return item + 1;
});
第一步：Babel的配置文件 .babelrc，存放到项目的更目录下。
所有Babel工具和模块的使用，都必须先写好
.babelrc。{
'presets':[
'es2015',
'react',
'stage-2'
],
'plugins':[]
}
①presets字段设定转码规则，官方提过一下的规则集，可根据需要安装。
::ES2015转码规则
npm install --save-dev babel-preset-es2015
::react转码规则
npm install --save-dev babel-preset-react
::ES7不同阶段语法提案的转码规则（共有四个阶段），选装一个
npm install --save-dev babel-preset-stage-0
npm install --save-dev babel-preset-stage-1
npm install --save-dev babel-preset-stage-2
npm install --save-dev babel-preset-stage-3
②plugins字段是babel插件。
例如:Ant Design 中需要按需加载antd脚本和样式
npm install --save-dev antd babel-plugin-import
{
"plugins": [
["import", { libraryName: "antd", style: true }]
]
}
第二步：babel-core
有的代码需要调用Babel的API进行转码，就要使用babel-core模块。
npm install babel-core --save-dev
更多Babel资料，请查阅大神日志：http://www.ruanyifeng.com/blog/2016/01/babel.html
（2）jsx-loader jsx编译器
npm install --save-dev jsx-loader
2、css/sass/less 处理
npm install --save-dev css-loader style-loader sass-loader less-loader
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.scss$/,
loader: "style-loader!css-loader!sass-loader"
},
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
},
3、文件处理
npm install --save-dev url-loader file-loader
{
test: /\.(jpg|png)$/,
loader: "url-loader?limit=8192"
},
{
test: /\.svg$/,
loader: 'url-loader?limit=100000'
},
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
loader: 'file-loader'
},
4、json处理
npm install --save-dev json-loader
{
test:/\.json$/,
loader:'json-loader'
}
四、loader一览表
| 扩展名 | 语义 | loader举例 |
| .js | returns module exports | babel-loader |
| .ts | returns module exports | ts-loader |
| .coffee | returns module exports | coffee-loader coffee-redux-loader |
| .jsx | returns module exports (react component) | jsx-loader react-hot-loader!jsx-loader |
| .json .json5 | returns json value | json-loader json5-loader |
| .txt | return string value | raw-loader |
| .css | returns nothing, side effect of adding style to DOM | style-loader!css-loader style-loader!css-loader!autoprefixer-loader |
| .less | returns nothing, side effect of adding style to DOM | style-loader!css-loader!less-loader |
| .scss | returns nothing, side effect of adding style to DOM | style-loader!css-loader!scss-loader |
| .style | returns nothing, side effect of adding style to DOM | style-loader!css-loader!stylus-loader |
| .png .jpg .jpeg .gif .svg | returns url to image | file-loader url-loader |
| .woff .ttf | returns url to font | file-loader url-loader |
| .wav .mp3 | returns url to audio | file-loader url-loader |
| .mpeg .mp4 .webm .ogv | returns url to video | file-loader |
| .html | returns HTML as string | html-loader |
| .md .markdown | returns HTML as string | html-loader!markdown-loader |
| .jade | returns template function | jade-loader |
| .hbs .handlebars | returns template function | handlebars-loader |