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
- 上一篇 »webpack务虚扫盲
- 下一篇 »webpack 之,10 css 提取,兼容,压缩