Webpack--loaders

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-dev
npm install jquery -save

//注意这种写法 jQuery这个变量直接插入到plugin.js里面了
//相当于在plugin.js这个文件的开始添加了 var jQuery = require('jquery');
import 'imports?jQuery=jquery!./plugin.js';

5 献上师傅的文章

Webpack傻瓜式指南1
Webpack傻瓜式指南2