Webpack3的使用（三）

Webpack3的使用（三）

一、什么是loader以及loader的特性

loader是用来处理资源文件的，接受的资源文件是一个参数，loader处理完以后会返回一个新的资源

特性：

     可以是串联的

     可以是同步也可以是异步，可以再node.js环境下运行

     后边可以跟参数可以通过正则表达式直接指定文件的后缀名，即指定某一个后缀名的文件由某一个loader来执行

     可以通过npm来安装

     可以获取configuration，即能获取到webpack的配置

     插件可以给loader更多的特性

   可以生成额外的文件

二、loader的使用

（一）、Babel-loader转换为es6语法

通过babel-preset-env转换es6，案例步骤如下：

1、 项目目录

npm install html-webpack-plugin --save-dev

npm install --save-dev babel-loader babel-core babel-preset-env webpack

2、 各个文件代码

3、截止以上代码npm run webpack以后

（二）、处理醒目中的css文件，比如less等

1、页面中引入css样式

（1）、Src文件夹下新增css文件夹-->新建公用样式common.js

（2）、引入到入口文件app.js中

import './css/common.css';

（3）、npm install style-loader css-loader --save-dev

（4）、配置css的loader

备注：loader的处理方式是从右到左

（5）、npm run webpack打包查看index.html的页面渲染的样式结果

2、处理兼容容浏览器样式前缀

（1）、安装插件

npm install postcss-loader --save-dev

npm install autoprefixer --save-dev   （postcss-loader处理前缀的插件）

（2）、配置插件

（3）、npm run webpack打包  效果

3、如何使用less和sass？

（1）、npm install less-loader --save-dev

npm install less --save-dev

（2）、

（3）、npm run webpack打包

4、分离css文件

若想css文件担负分离出来，需要用到插件extract-text-webpack-plugin

用法：

1、 Install

# for webpack 3 

npm install --save-dev extract-text-webpack-plugin

2、在webpack.config.js中配置

3、webpack打包即可

4、效果

以上是css和预处理器的打包方法，那么下次的笔记记录一下怎样处理模板文件吧

js打包请看：

Webpack-v3.5.4的使用（一）：http://blog.csdn.net/liuxin_1991/article/details/78834999

Webpack-v3.5.4的使用（二）：http://blog.csdn.net/liuxin_1991/article/details/78841646