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 相关文章推荐
从新浪弄下来的全屏广告代码 与使用说明
Mar 15 Javascript
模拟用户操作Input元素,不会触发相应事件
May 11 Javascript
javascript中的107个基础知识收集整理 推荐
Mar 29 Javascript
通过正则表达式实现表单验证是否为中文
Feb 18 Javascript
JavaScript限定图片显示大小的方法
Mar 11 Javascript
jQuery的几个我们必须了解的特点
May 03 Javascript
JS添加或修改控件的样式(Class)实现方法
Oct 15 Javascript
Vue数据驱动模拟实现2
Jan 11 Javascript
Angularjs单选改为多选的开发过程及问题解析
Feb 17 Javascript
JS设置时间无效问题的解决办法
Feb 18 Javascript
vue使用 better-scroll的参数和方法详解
Jan 25 Javascript
原生JS实现自定义下拉单选选择框功能
Oct 12 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结合js实现点击超链接执行删除确认操作
2014/10/31 PHP
在CentOS上搭建LAMP+vsftpd环境的简单指南
2015/08/01 PHP
Java中final关键字详解
2015/08/10 PHP
PHP使用fopen与file_get_contents读取文件实例分享
2016/03/04 PHP
javascript函数库-集合框架
2007/04/27 Javascript
用js实现随机返回数组的一个元素
2007/08/13 Javascript
javascript 读取xml,写入xml 实现代码
2009/07/10 Javascript
JQuery中对Select的option项的添加、删除、取值
2013/08/25 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
2016/08/01 Javascript
javascript常用的设计模式
2017/02/09 Javascript
原生js实现旋转木马轮播图效果
2017/02/27 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
2017/06/16 jQuery
微信小程序开发教程之增加mixin扩展
2017/08/09 Javascript
JS实现网页端猜数字小游戏
2020/03/06 Javascript
vue 动态组件用法示例小结
2020/03/06 Javascript
Python在Windows和在Linux下调用动态链接库的教程
2015/08/18 Python
Python中遇到的小问题及解决方法汇总
2017/01/11 Python
python 搭建简单的http server,可直接post文件的实例
2019/01/03 Python
python如何将多个PDF进行合并
2019/08/13 Python
python实现横向拼接图片
2020/03/23 Python
Selenium关闭INFO:CONSOLE提示的解决
2020/12/07 Python
python实现scrapy爬虫每天定时抓取数据的示例代码
2021/01/27 Python
HTML5获取当前地理位置并在百度地图上展示的实例
2020/07/10 HTML / CSS
HearthSong官网:儿童户外玩具、儿童益智玩具
2017/10/16 全球购物
We Fashion荷兰:一家国际时装公司
2018/04/18 全球购物
高一家长会邀请函
2014/01/12 职场文书
认识深刻的检讨书
2014/02/16 职场文书
交通文明倡议书
2014/05/16 职场文书
无刑事犯罪记录证明范本
2014/09/29 职场文书
接待员岗位职责范本
2015/04/15 职场文书
用人单位聘用意向书
2015/05/11 职场文书
2015年员工试用期工作总结
2015/05/28 职场文书
小学生手册家长意见
2015/06/03 职场文书
大学文艺委员竞选稿
2015/11/19 职场文书
frg-100简单操作(设置)说明
2022/04/05 无线电
TV动画《八十龟酱观察日记》第四季宣传PV公布
2022/04/06 日漫