详解webpack进阶之loader篇


Posted in Javascript onAugust 23, 2017

webpack的loaders是一大特色,也是很重要的一部分。这遍博客我将分类讲解一些常用的laoder

一、loaders之 预处理

  • css-loader 处理css中路径引用等问题
  • style-loader 动态把样式写入css
  • sass-loader scss编译器
  • less-loader less编译器
  • postcss-loader scss再处理

npm install --save -dev css-loader style-loader sass-loader less-loader postcss-loader

栗子:

module: {
 loaders: [
  {test: /\.css$/, loader: "style!css?sourceMap!postcss"},
  {test: /\.less$/, loader: "style!css!less|postcss"},
  {test: /\.scss$/, loader: "style!css!sass|postcss"}
 ]
}

二、loaders之 js处理

  • babel-loader
  • jsx-loader

npm install --save-dev babel-core babel-preset-es2015 babel-loader jsx-loader

栗子

新建一个名字为.babelrc的文件

{
 "presets": ["es2015","react"],
 "plugins":["antd"]
}

新建一个名字为webpack.config.js文件

module.exports ={
 entry: './entry.js',
 output: { path: __dirname,
 filename: 'bundle.js'
 },
 module: {
loaders: [
 {test: /\.js$/, loader: "babel", exclude: /node_modules/},
 {test: /\.jsx$/, loader: "jsx-loader"}
 {test: /.css$/, loader: 'style!css'} ]
 }
};

三、loaders之 图片处理

url-loader

npm install --save-dev url-loadr

module: {
 loaders: [
  {test: /\.(jpg|png)$/, loader: "url?limit=8192"},
 ]
}

四、loaders之 文件处理

file-loader

npm install --save-dev file-loader

module: {
 loaders: [
  {
   test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
   loader: 'file'
   },
 ]
}

五、loaders之 json处理

json-loader

npm install --save-dev json-loader

module: {
 loaders: [
  {test: /\.json$/,loader: 'json'},
 ]
}

六、loaders之 html处理

raw-loader

npm install --save-dev raw-loader

module: {
 loaders: [
  { test: /\.html$/,loader: 'raw'},
 ]
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
extjs 学习笔记(三) 最基本的grid
Oct 15 Javascript
Jquery中增加参数与Json转换代码
Nov 20 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
Nov 04 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
Nov 14 Javascript
jquery简单图片切换显示效果实现方法
Jan 14 Javascript
使用jQuery管理选择结果
Jan 20 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
Mar 03 Javascript
理解Javascript图片预加载
Feb 23 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
Dec 20 Javascript
JS简单获取并修改input文本框内容的方法示例
Apr 08 Javascript
10个最受欢迎的 JavaScript框架(推荐)
Apr 24 Javascript
JS实现轮播图效果
Jan 11 Javascript
Vue中定义全局变量与常量的各种方式详解
Aug 23 #Javascript
基于JavaScript实现带数据验证和复选框的表单提交
Aug 23 #Javascript
使用JS组件实现带ToolTip验证框的实例代码
Aug 23 #Javascript
利用Vue实现移动端图片轮播组件的方法实例
Aug 23 #Javascript
详解AngularJS跨页面传值(ui-router)
Aug 23 #Javascript
vue中页面跳转拦截器的实现方法
Aug 23 #Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 #jQuery
You might like
php之对抗Web扫描器的脚本技巧
2008/10/01 PHP
php的list()的一步操作给一组变量进行赋值的使用
2011/05/18 PHP
spl_autoload_register与autoload的区别详解
2013/06/03 PHP
解析php中如何调用用户自定义函数
2013/08/06 PHP
改写函数实现PHP二维/三维数组转字符串
2013/09/13 PHP
Javascript中的几种URL编码方法比较
2015/01/23 Javascript
jQuery仿京东商城楼梯式导航定位菜单
2016/07/25 Javascript
javascript实现下雨效果
2017/03/27 Javascript
vue实现app页面切换动画效果实例
2017/05/23 Javascript
js合并两个数组生成合并后的key:value数组
2018/05/09 Javascript
微信小程序实现自上而下字幕滚动
2018/07/14 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
Vue双向数据绑定(MVVM)的原理
2020/10/03 Javascript
JavaScript基于SVG的图片切换效果实例代码
2020/12/15 Javascript
如何在VUE中使用vue-awesome-swiper
2021/01/04 Vue.js
[05:00]第二届DOTA2亚洲邀请赛主赛事第三天比赛集锦.mp4
2017/04/04 DOTA
python中使用enumerate函数遍历元素实例
2014/06/16 Python
将Python代码嵌入C++程序进行编写的实例
2015/07/31 Python
Python打造出适合自己的定制化Eclipse IDE
2016/03/02 Python
python中hashlib模块用法示例
2017/10/30 Python
用Anaconda安装本地python包的方法及路径问题(图文)
2019/07/16 Python
python输出结果刷新及进度条的实现操作
2020/07/13 Python
python实现启动一个外部程序,并且不阻塞当前进程
2020/12/05 Python
Python 里最强的地图绘制神器
2021/03/01 Python
JD Sports芬兰:英国领先的运动鞋和运动服饰零售商
2018/11/16 全球购物
什么是接口(Interface)?
2013/02/01 面试题
科室工作的个人自我评价
2013/10/30 职场文书
综合办公室主任职责
2013/12/16 职场文书
交通事故私了协议书
2014/04/16 职场文书
基层党员干部四风问题整改方向和措施
2014/09/25 职场文书
车辆年检委托书范本
2014/10/14 职场文书
办公楼租房协议书范本
2014/11/25 职场文书
优质服务标语口号
2015/12/26 职场文书
如何拟写通知正文?
2019/04/02 职场文书
Golang全局变量加锁的问题解决
2021/05/08 Golang
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL