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 相关文章推荐
使用javascript访问XML数据的实例
Dec 27 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
May 04 Javascript
JavaScript中判断函数、变量是否存在
Jun 10 Javascript
javascript实现一个数值加法函数
Jun 26 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
Aug 31 Javascript
JavaScript中apply方法的应用技巧小结
Sep 29 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
Mar 09 Javascript
elementUI 设置input的只读或禁用的方法
Oct 30 Javascript
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
微信小程序云开发之模拟后台增删改查
May 16 Javascript
解决layui弹出层layer的area过大被遮挡的问题
Sep 21 Javascript
JS数组方法push()、pop()用法实例分析
Jan 18 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
全国FM电台频率大全 - 30 宁夏回族自治区
2020/03/11 无线电
PHP+MYSQL会员系统的登陆即权限判断实现代码
2011/09/23 PHP
php中smarty实现多模版网站的方法
2015/06/11 PHP
PHP 面向对象程序设计之类属性与类常量实现方法分析
2020/04/13 PHP
PHP date_default_timezone_set()设置时区操作实例分析
2020/05/16 PHP
让iframe框架网页在任何浏览器下自动伸缩
2006/08/18 Javascript
你需要知道的JavsScript可以做什么?
2007/06/29 Javascript
js输出列表实现代码
2010/09/12 Javascript
jQuery动态添加 input type=file的实现代码
2012/06/14 Javascript
jQuery+css+html实现页面遮罩弹出框
2013/03/21 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
2015/08/13 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
2016/07/22 Javascript
jQuery按需加载轮播图(web前端性能优化)
2017/02/17 Javascript
Google 爬虫如何抓取 JavaScript 的内容
2017/04/07 Javascript
NodeJs通过async/await处理异步的方法
2017/10/09 NodeJs
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
2019/08/07 Javascript
js实现车辆管理系统
2020/08/26 Javascript
[01:09]模型精美,特效酷炫!TI9不朽宝藏Ⅰ鉴赏
2019/05/10 DOTA
Windows系统下安装Python的SSH模块教程
2015/02/05 Python
复习Python中的字符串知识点
2015/04/14 Python
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
Python正则表达式实现简易计算器功能示例
2019/05/07 Python
elasticsearch python 查询的两种方法
2019/08/04 Python
利用pyecharts实现地图可视化的例子
2019/08/12 Python
Python爬取豆瓣视频信息代码实例
2019/11/16 Python
Python爬虫实现selenium处理iframe作用域问题
2021/01/27 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
【HTML5】3D模型--百行代码实现旋转立体魔方实例
2016/12/16 HTML / CSS
Michael Kors美国官网:美式奢侈生活风格的代表
2016/11/25 全球购物
自荐书模板
2013/12/15 职场文书
创业计划书六个要素
2013/12/26 职场文书
《诺贝尔》教学反思
2014/02/17 职场文书
《维生素c的故事》教学反思
2014/02/18 职场文书
医院护士见习期自我鉴定
2014/09/15 职场文书
军训结束新闻稿
2015/07/17 职场文书