Webpack3的使用(三)
来源:互联网 发布:数据库2002 编辑:程序博客网 时间:2024/06/03 20:43
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打包
# for webpack 3 npm install --save-dev extract-text-webpack-plugin
- Webpack3的使用(三)
- Webpack3的使用(一)
- Webpack3的使用(二)
- Webpack3的使用(四)
- Webpack3的使用(五)
- webpack3.0(三)整合react
- webpack3.0----postcss-loader的使用
- webpack3.6.0使用笔记
- web项目的构建流程及webpack3.10.0的使用
- webpack3.0问题系列 ——postcss-loader的使用
- 教你怎么使用 webpack3 的 HMR 模块热加载
- webpack3的常用配置
- 深入浅出的webpack3入门教程
- webpack3
- webpack3.6.0使用笔记-附件
- webpack3最新版本配置研究(三)多入口,html-webpack-plugin, extract-text-webpack-plugin
- Webpack3.x Hot Module Replacement的使用 && switch to prot env to use ExtractTextPlugin
- 搭建React开发环境(使用babel,webpack3)
- layui后台select赋值
- Hessian、webservice、RESTFUL各自特点
- python中列表,元组,字典知识点整理
- Linux Kill 进程
- TC Div.2. 625
- Webpack3的使用(三)
- echarts -- 动态绑定data中的数据
- 2017年鉴
- adb配置中出现不能识别设备的情况
- 实现简单爬虫中遇到的问题
- MySQL explain执行计划解读
- Gradle实战及学习建议
- python 交互式执行SQL
- vue一个组件引入多个swiper轮播可能引发的分页器数量异常问题