详解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 相关文章推荐
网站上面有这种切换效果
Jun 26 Javascript
jquery 插件实现图片延迟加载效果代码
Feb 06 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
Sep 03 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
Jan 12 Javascript
调用HttpHanlder的几种返回方式小结
Dec 20 Javascript
Javascript实现div层渐隐效果的方法
May 30 Javascript
js实现带有介绍的Select列表菜单实例
Aug 18 Javascript
js获取当前日期时间及其它日期操作汇总
Mar 08 Javascript
Three.js基础部分学习
Jan 08 Javascript
微信浏览器禁止页面下拉查看网址实例详解
Jun 28 Javascript
浅谈Node.js爬虫之网页请求模块
Jan 11 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
Jan 12 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中=赋值操作符对不同数据类型的不同行为
2011/01/02 PHP
ThinkPHP 防止表单重复提交的方法
2011/08/08 PHP
PHP基于正则批量替换Img中src内容实现获取缩略图的功能示例
2017/06/07 PHP
Laravel学习教程之路由模块
2017/08/18 PHP
PHPMailer ThinkPHP实现自动发送邮件功能
2018/06/10 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
JQuery 将元素显示在屏幕的中央的代码
2010/02/27 Javascript
基于jquery的点击链接插入链接内容的代码
2012/07/31 Javascript
如何获取select下拉框的值(option没有及有value属性)
2013/11/08 Javascript
Js nodeType 属性全面解析
2013/11/14 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
COM组件中调用JavaScript函数详解及实例
2017/02/23 Javascript
原生JS实现的简单轮播图功能【适合新手】
2018/08/17 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
Jquery实现获取子元素的方法分析
2019/08/24 jQuery
vue+Element中table表格实现可编辑(select下拉框)
2020/05/21 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
2020/08/17 Javascript
[05:35]DOTA2英雄梦之声_第13期_拉比克
2014/06/21 DOTA
[08:17]Ti9 现场cosplay
2019/09/10 DOTA
[02:13] 完美世界DOTA2联赛PWL DAY5集锦
2020/11/03 DOTA
python实现在sqlite动态创建表的方法
2015/05/08 Python
恢复百度云盘本地误删的文件脚本(简单方法)
2017/10/21 Python
用python处理MS Word的实例讲解
2018/05/08 Python
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
英国排名第一的宠物店:PetPlanet
2020/02/02 全球购物
客服端调用EJB对象的几个基本步骤
2012/01/15 面试题
玲玲的画教学反思
2014/02/04 职场文书
青年文明号复核材料
2014/02/11 职场文书
大学生职业生涯规划书
2014/03/14 职场文书
相亲活动方案
2014/08/26 职场文书
幼儿园教师工作总结2015
2015/04/02 职场文书
python pyhs2 的安装操作
2021/04/07 Python
如何在CocosCreator里画个炫酷的雷达图
2021/04/16 Javascript
一道JS算法面试题——冒泡、选择排序
2021/04/21 Javascript
浅谈Redis中的RDB快照
2021/06/29 Redis