1.总体介绍
不同资源不同loader，否则加载失败；
//loaders类似modules，exports的一个方法//默认Webpack只处理javaScript；//你的资源里有图片、css、html...如果没有相应的loader，人家不认识你；
可以通过全名XX-loader或短名xx引用；
loaders可以链式写，用!分离loaders和resource，如针对样式loader:(style!css!sass)loaders处理后的资源会用js语法包裹，最终返回js---------Webpack只处理javaScript注意：loaders链式写的时候，[预]处理工具从右到左应用！！！如下：require("style!css!less!bootstrap/less/bootstrap.less"); 对bootstrap/less/bootstrap.less先进行less解析再css解析再style解析，最终返回js
loaders可以接受查询参数--------；
用?引导query string，如url-loader?mimetype=image/png查询格式 ?key=value&key2=value2 或 JSON对象 ?{"key":"value","key2":"value2"}. 2. loader用法
1.通过require显性声明----------不推荐 只能处理某一明确的目录文件； require("!style!css!less!bootstrap/less/bootstrap.less");-----只处理bootstrap/less文件下的bootstrap.less 2.通过webpack.config.js配置---------推荐 通过正则表达式来绑定loaders----匹配一类文件 { module: { loaders: [ { //匹配.jade结尾的文件； test: /\.jade$/, loader: "jade"， query:{} }, { //匹配.css结尾的文件； test: /\.css$/, //链式loaders写法一，从右往左解析 loader: "style!css" ， query:{} }, { test: /\.css$/, //链式loaders写法一，从右往左解析 loaders: ["style", "css"] ， query:{} }, { test: /\.scss$/, //针对sass的解析，有依赖环境，可能是ruby…… //在linux中，如果报错，删除sass-loader，重新npm init下 loaders: ["style", "css","sass"] ， query:{} }, ] } } 3.命令行-------忽略 3. 使用preLoaders和postLoaders
perLoaders顾名思义就是在loaders执行之前处理的，webpack的处理顺序是perLoaders - loaders - postLoaders。
module: { //在config文件中配置,和loaders一样的语法 perLoaders: [ { test: /\.jsx?$/, include: APP_PATH, loader: 'jshint-loader' } ]},//配置jshint的选项，支持es6的校验jshint: { "esnext": true} 4. 使用imports-loader不支持AMD或者CommonJS规范的插件
//以jquery为例npm install imports-loader --save-devnpm install jquery -save//注意这种写法 jQuery这个变量直接插入到plugin.js里面了//相当于在plugin.js这个文件的开始添加了 var jQuery = require('jquery');import 'imports?jQuery=jquery!./plugin.js';