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