新建目录

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

四、处理项目中的资源文件：es6、css、图片压缩、图片转成base64的编码形式