webpack css加载和图片加载的方法示例


Posted in Javascript onSeptember 11, 2018

css加载器

在webpack中,所有的资源(js文件、css文件、模板文件,图片文件等等)都被看成是一个模块,因此多有的资源都是可以被加载的。

加载这些资源我们要在module属性定义这些加载配置(指定加载器)。

在module属性中,通过定义loaders定义加载器,其属性值是一个数组,每一个成员代表一个配置。

  • 通过test定义匹配的规则(正则表达式)
  • 通过loader定义加载器,可以通过!级联多个加载器

加载css是要两个加载器,一个是style-loader,一个是css-loader样式文件默认加载到head里面。

我们来看一个小例子

|__static 
  |__css 
    |__app.css 
  |__app.js 
|__ index.html 
|__webpack.config.js

app.css

h1{
  background:red;
  width:100px;
  height:100px;
  color:blue;
}

app.js

require('./css/app.css')
document.write('<h1>hello connie</h1>')

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script type="text/javascript" src="dest/dest.js"></script>
</body>
</html>

webpack.config.js

module.exports = {
  entry:'./static/app.js',
  output:{
    filename:'dest/dest.js'
  },
  module:{
    loaders:[
      {
        // 配置正则表达式,查找后缀为.css文件
        test:/\.css$/,
        // 配置加载器,用!符号级联
        loader:'style-loader!css-loader'
      }
    ]
  }
}

注意:test参数是正则表达式,不需要加引号,如果写成test:“/.css$/”会报错!!!

图片加载器

在webpack,图片资源也可以被看成是一个模块,因此也可以用require去加载它们。

但是加载这些图片,我们需要图片加载器,图片加载器叫url-loader

图片加载比较特殊,有两种加载方式

  • 内嵌式:将图片嵌入文件内部(图片将转换成base64格式)
  • 外链式,将图片作为一个资源嵌入(通过图片路径引入)

在webpack中,我们可以在url-loader中定义个limit参数,来决定采取哪种方式引入。

  • 语法 url-loader?limit=2048
  • ?是用来定义加载器的参数配置的
  • Limit表示图片大小限制
  • 2048单位是b,所以2048表示2Kb

这句话的意思是,当图片小于2KB的时候,我们采取内嵌式加载图片

当图片大于2kb的时候我们采取外链式。

app.css

div{
  height: 200px;
  width: 200px;
}

.test1{
  background-image: url("./images/test1.png");
}

.test2{
  background-image: url("./images/test2.jpg");
}

.test3{
  background-image: url("./images/test3.png");
}

webpack.config.js

module.exports = {
  entry: './static/app.js',
  output: {
    filename: 'dest/dest.js'
  },
  module: {
    loaders:[
      {
        // 图片加载器
        test:/\.(png|jpg|gif|jpeg)$/,
        loader:'url-loader?limit=2048'
      },
      {
        test:/\.css$/,
        loader:'style-loader!css-loader'
      }
    ]
  }
}

图片加载需要安装url-loader和file-loader

npm install url-loader
npm install file-loader

再次查看dest.js

webpack css加载和图片加载的方法示例

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

Javascript 相关文章推荐
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
Jan 20 Javascript
javascript面向对象入门基础详细介绍
Sep 05 Javascript
不要使用jQuery触发原生事件的方法
Mar 03 Javascript
JavaScript中获取纯正的undefined的方法
Mar 06 Javascript
JavaScript File分段上传
Mar 10 Javascript
30分钟快速掌握Bootstrap框架
May 24 Javascript
javascript DOM的详解及实例代码
Mar 06 Javascript
Angular动态添加、删除输入框并计算值实例代码
Mar 29 Javascript
浅谈JS中的反柯里化( uncurrying)
Aug 17 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
Jun 28 Javascript
浅谈vue方法内的方法使用this的问题
Sep 15 Javascript
浅谈vue3中effect与computed的亲密关系
Oct 10 Javascript
vue1.0和vue2.0的watch监听事件写法详解
Sep 11 #Javascript
webpack的CSS加载器的使用
Sep 11 #Javascript
JavaScript基础教程之如何实现一个简单的promise
Sep 11 #Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
Sep 11 #Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
Sep 11 #Javascript
Angular6 正则表达式允许输入部分中文字符
Sep 10 #Javascript
vue中使用input[type=&quot;file&quot;]实现文件上传功能
Sep 10 #Javascript
You might like
PHP管理内存函数 memory_get_usage()使用介绍
2012/09/23 PHP
php实现上传图片文件代码
2015/07/19 PHP
Yii使用Captcha验证码的方法
2015/12/28 PHP
php面向对象值单例模式
2016/05/03 PHP
PHP SPL 被遗落的宝石【SPL应用浅析】
2018/04/20 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
如何运行/调试你的PHP代码
2020/10/23 PHP
客户端脚本中常常出现的一些问题和调试技巧
2007/01/09 Javascript
jquery 简短右键菜单 多浏览器兼容
2010/01/01 Javascript
为JavaScript类型增加方法的实现代码(增加功能)
2011/12/29 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
jQuery过滤选择器:not()方法使用介绍
2014/04/20 Javascript
js实现键盘Enter键提交表单的方法
2015/05/27 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
2016/11/20 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
ES6正则表达式的一些新功能总结
2017/05/09 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
2017/06/30 Javascript
原生JS+Canvas实现五子棋游戏
2020/05/28 Javascript
利用纯js + transition动画实现移动端web轮播图详解
2017/09/10 Javascript
React根据宽度自适应高度的示例代码
2017/10/11 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
2018/09/17 Javascript
vue头部导航动态点击处理方法
2018/11/02 Javascript
layui之table checkbox初始化时选中对应选项的方法
2019/09/02 Javascript
vue把输入框的内容添加到页面的实例讲解
2019/11/11 Javascript
Python中删除文件的程序代码
2011/03/13 Python
Python程序设计入门(3)数组的使用
2014/06/16 Python
Python写的Socks5协议代理服务器
2014/08/06 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
Python内置数据类型list各方法的性能测试过程解析
2020/01/07 Python
Python xlwt模块使用代码实例
2020/06/10 Python
CSS3中animation实现流光按钮效果
2020/12/21 HTML / CSS
毕业生自我鉴定范文
2013/11/08 职场文书
学生会主席就职演讲稿
2014/01/14 职场文书
村主任个人对照检查材料
2014/10/01 职场文书
2015年小学生新年寄语
2014/12/08 职场文书
Win11 22H2 2022怎么更新? 获得Win1122H22022版本升级技巧
2022/09/23 数码科技