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 模仿vbs中的 DateAdd() 函数的代码
Aug 13 Javascript
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
Dec 28 Javascript
juqery 学习之三 选择器 可见性 元素属性
Nov 25 Javascript
javascript-简单的计算器实现步骤分解(附图)
May 30 Javascript
JS将光标聚焦在文本最后的实现代码
Mar 28 Javascript
用jquery模仿的a的title属性的例子
Oct 22 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
Apr 12 Javascript
vue页面使用阿里oss上传功能的实例(二)
Aug 09 Javascript
shiro授权的实现原理
Sep 21 Javascript
Vuejs实现购物车功能
Nov 05 Javascript
JavaScript中构造函数与原型链之间的关系详解
Feb 25 Javascript
Vue实现微信支付功能遇到的坑
Jun 05 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
新安装的MySQL数据库需要注意的安全知识
2008/07/30 PHP
php中几种常见安全设置详解
2010/04/06 PHP
PHP中的魔术方法总结和使用实例
2015/05/11 PHP
PHP通过引用传递参数用法分析
2016/12/01 PHP
Yii-自定义删除确认弹框(zyd)jquery实现代码
2013/03/04 Javascript
JavaScript日期类型的一些用法介绍
2015/03/02 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
2015/10/26 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
2015/12/04 Javascript
jQuery纵向导航菜单效果实现方法
2016/12/19 Javascript
js字符串与Unicode编码互相转换
2017/05/17 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
2017/09/12 Javascript
用p5.js制作烟花特效的示例代码
2018/03/21 Javascript
Vue表单类的父子组件数据传递示例
2018/05/03 Javascript
JavaScript事件委托原理与用法实例分析
2018/06/07 Javascript
electron-vue开发环境内存泄漏问题汇总
2019/10/10 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
2020/08/04 Javascript
微信小程序中data-key属性之数据传输(经验总结)
2020/08/22 Javascript
Python中格式化format()方法详解
2017/04/01 Python
通过实例解析Python调用json模块
2019/12/11 Python
html5+CSS3+JS实现七夕言情功能代码
2017/08/28 HTML / CSS
印度化妆品购物网站:Nykaa
2018/07/22 全球购物
Amcal中文官网:澳洲综合性连锁药房
2019/03/28 全球购物
元旦寄语大全
2014/04/10 职场文书
绿色环保家庭事迹材料
2014/08/31 职场文书
我爱幼儿园演讲稿
2014/09/11 职场文书
2014审计局领导班子民主生活会对照检查材料思想汇报
2014/09/20 职场文书
孕妇离婚协议书范本
2014/11/20 职场文书
升职自荐信怎么写
2015/03/05 职场文书
2015年销售部工作总结范文
2015/04/27 职场文书
卫生院艾滋病宣传活动总结
2015/05/09 职场文书
民间借贷被告代理词
2015/05/23 职场文书
提档介绍信范文
2015/10/22 职场文书
早上好问候语大全
2015/11/10 职场文书
禁毒心得体会范文
2016/01/15 职场文书
mysql连接查询中and与where的区别浅析
2021/07/01 MySQL
javascript对象3个属性特征
2021/11/17 Javascript