新建目录
Coponents : 放需要的应用组件，创建layer组件；
--App.js ： 应用的入口
--创建layer组件：
Layer.html
Layer.less
Layer.js
--修改配置文件：
*记得安装插件html-webpack-plugins;
loader
官网 => Using Loaders
处理资源文件；接受一个资源文件作为参数，处理完返回一个资源文件；比如 CoffeeScript or JSX.这两种原本webpack不支持的格式；
特性：
--串联
--同步和异步
--nodejs环境下运行
--loader可以接受参数
--可以通过正则指定文件后缀名，某一个后缀名文件用哪个loader
--可以通过npm安装
--可以获取webpack的配置，插件可以给loader更多的特性，loader可以生产额外的文件
使用loader:
打开我们的配置文件：=>添加loader
1.将es6转es5 使用babel： http://babeljs.io/docs/setup/#installation
还需要一个配置：preset：例如：
先看一下插件：
这个插件有什么用呢，我们知道es6每年都在不断的更新、修订等，
每年的修订都会有一个当年的知识的列表；我们点开es2015看一下：
这都是es6的一个特性；
我们可以通过指定 Presets来告诉babel-loader，让babel-loader知道，来转换某一些特性为我们的js, 如果需要它转换成所有的特性，可以指定为 latest (包括2015.2016.2017)；怎样指定插件？ 涉及到参数问题，
给loader指定参数：
webpack官网给了两种方法：
一种是在loader后面跟个问号？ 后面跟指定参数；
另外一种在配置文件中，加一个query属性，指定参数
=>
=>
但是首先要安装preset这个插件；
Babel官网还给了一种配置方式：
在项目的根目录下建.babelrc这个文件，内容是
{
"presets": ["env"]
}
还有一种方式是在我们package.json文件这种配置：
配置好了这些东西 运行一下试试;
发现报错：
先注释掉：
再运行:检查生成的html 和js ;
在浏览器看下生成的html,以及html的运行情况；修改一下试试：
为了更清晰的知道loader应用的哪个参数，我们配置用以下这种方式：
刚刚打包的过程中，发现打包速度非常慢，因为babel loader 处理非常耗时：
怎样改善？
Webpack官网=> 
=> module.loaders
Exclude:排除范围
排除这个文件，不让它处理，减少打包时间；
其实发现，现在的打包速度还是很慢；
我们还可以指定打包范围：
再试一下；
发现报错，因为路径必须是一个绝对路径：
2.处理项目中的css预处理语言;
Css-loader style-loader
先安装这两个loader
1). 先学习怎么处理css文件：
-- 在src下新建css文件夹（用来放项目中公用的css），新建common.css样式文件；
在入口文件对common.css进行引用 => 用import或require;
配置css的loader
定义好了loader,开始打包：看看我们设置的样式有没有生效
接下来看下css-loader其他的情况，项目中会用到现在浏览器都支持的不太好的属性，比如flex;
我们需要手动添加前缀，
也可以使用loader: postcss-loader 先安装；
打开npm官网,搜下postcss-loader
它是一个后处理器，结合它的插件可以做很多事情；比如autoprefixer，
先安装
装好之后怎么使用：
在css的loader中加上刚刚安装的postcss-loader，loader的处理方式是从右到左：
官网给的例子：
Autoprefixer插件如何使用？
看官网：
这是webpack1给的方案；
最近的5个浏览器的版本加前缀；
运行发现会报错：
换一种方法：
这样就ok了！
Postcss有很多的插件；
点击进入看一下；
在css中我们会用 @import ‘’ 引入一个文件
运行一下看看webpack怎么处理的；
发现flex.css虽然插入到了页面中，但是并没有加前缀，也就是经过了css-loader和style-loader,但是并没有经过postcss-loader;怎么办？
使用css-loader的一个参数，之前介绍过loader传参的方式，用query或者？；
在css-loader之后,来指定,几个数量的loader来处理@import进来的资源；
再运行；
2). 处理.Less文件；
先安装 less-loader ,
没安装less的要安装less
新增匹配规则：
Add PostCSS Loader to webpack.config.js.
Put it after css-loader and style-loader. But before sass-loader, if you use it.
如果报错 ，写全：
打包；
看一下打包生成的页面；发现layer.less的内容已经处理到页面；
修改layer.less
打包；
发现生效：
* 在Less中也使用@import ‘’ : 运行；发现我们没加
less已经帮我们处理了 @import ‘’;
*如果我们项目中要使用sass，安装sass-loader
同less