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中的稀疏数组与密集数组[译]
Sep 17 Javascript
js截取小数点后几位的写法
Nov 14 Javascript
jQuery控制网页打印指定区域的方法
Apr 07 Javascript
JS 实现可停顿的垂直滚动实例代码
Nov 23 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
Apr 19 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
Aug 19 Javascript
一个简易时钟效果js实现代码
Mar 25 Javascript
JS代码实现电脑配置检测功能
Mar 21 Javascript
JS求Number类型数组中最大元素方法
Apr 08 Javascript
vue源码解析之事件机制原理
Apr 21 Javascript
Vue导出页面为PDF格式的实现思路
Jul 31 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
Sep 16 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
snoopy 强大的PHP采集类使用实例代码
2010/12/09 PHP
php array的学习笔记
2012/05/10 PHP
php处理restful请求的路由类分享
2014/02/27 PHP
PHP微信支付结果通知与回调策略分析
2019/01/10 PHP
jQuery对象和Javascript对象之间转换的实例代码
2013/03/20 Javascript
文本框回车提交与禁止提交示例
2013/09/27 Javascript
js数组操作学习总结
2013/11/04 Javascript
form.submit()不能提交表单的原因分析
2014/10/23 Javascript
功能强大的Bootstrap组件(结合js)
2016/08/03 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
2016/08/05 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
2016/11/30 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
2017/01/15 Javascript
js实现鼠标拖动功能
2017/03/20 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
2017/05/22 Javascript
浅谈Express异步进化史
2017/09/09 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
2018/08/20 Javascript
Vue页面跳转动画效果的实现方法
2018/09/23 Javascript
JS求1到任意数之间的所有质数的方法详解
2019/05/20 Javascript
jquery实现动态改变css样式的方法分析
2019/05/27 jQuery
什么时候不能在 Node.js 中使用 Lock Files
2019/06/24 Javascript
鸿蒙系统中的 JS 开发框架
2020/09/18 Javascript
Python 解析XML文件
2009/04/15 Python
Python构造函数及解构函数介绍
2015/02/26 Python
Python实现mysql数据库更新表数据接口的功能
2017/11/19 Python
Python全排列操作实例分析
2018/07/24 Python
Python实现Mysql数据统计及numpy统计函数
2019/07/15 Python
Django上使用数据可视化利器Bokeh解析
2019/07/31 Python
用Python批量把文件复制到另一个文件夹的实现方法
2019/08/16 Python
tensorflow实现读取模型中保存的值 tf.train.NewCheckpointReader
2020/02/10 Python
python设置表格边框的具体方法
2020/07/17 Python
经济实惠的豪华家具:My-Furniture
2019/03/12 全球购物
一些PHP的面试题
2015/05/06 面试题
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类?
2012/05/30 面试题
《富饶的西沙群岛》教学反思
2014/04/09 职场文书
管理失职检讨书范文
2015/05/05 职场文书
MySQL学习必备条件查询数据
2022/03/25 MySQL