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 相关文章推荐
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
Dec 06 Javascript
顶部缓冲下拉菜单导航特效的JS代码
Aug 27 Javascript
父节点获取子节点的字符串示例代码
Feb 26 Javascript
js判断游览器类型及版本号的代码
May 11 Javascript
学习javascript面向对象 理解javascript原型和原型链
Jan 04 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
Apr 14 Javascript
jQuery Ajax File Upload实例源码
Dec 12 Javascript
原生javascript实现分页效果
Apr 21 Javascript
详解10分钟学会vue滚动行为
Sep 21 Javascript
看看“疫苗查询”小程序有温度的代码
Jul 31 Javascript
使用layui的router来进行传参的实现方法
Sep 06 Javascript
浅谈react路由传参的几种方式
Mar 23 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 中文字符串首字母的获取函数分享
2013/11/04 PHP
Drupal7连接多个数据库及常见问题解决
2014/03/02 PHP
typecho插件编写教程(一):Hello World
2015/05/28 PHP
phalcon框架使用指南
2016/02/23 PHP
Yii2针对指定url的生成及图片等的引入方法小结
2016/07/18 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
php 利用socket发送GET,POST请求的实例代码
2020/07/04 PHP
js 去除字符串第一位逗号的方法
2014/06/07 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
2014/12/16 Javascript
浅谈javascript面向对象程序设计
2015/01/21 Javascript
jquery.qtip提示信息插件用法简单实例
2016/06/17 Javascript
js canvas实现擦除动画
2016/07/16 Javascript
微信小程序 后台登录(非微信账号)实例详解
2017/03/31 Javascript
layui分页效果实现代码
2017/05/19 Javascript
原生JS 购物车及购物页面的cookie使用方法
2017/08/21 Javascript
使用vue中的混入mixin优化表单验证插件问题
2019/07/02 Javascript
详解Typescript 内置的模块导入兼容方式
2020/05/31 Javascript
在vue中实现给每个页面顶部设置title
2020/07/29 Javascript
vue 解决addRoutes多次添加路由重复的操作
2020/08/04 Javascript
谈谈JavaScript令人迷惑的==与+
2020/08/31 Javascript
简单的抓取淘宝图片的Python爬虫
2014/12/25 Python
python中的tcp示例详解
2018/12/09 Python
python多进程并发demo实例解析
2019/12/13 Python
Python基础之字符串操作常用函数集合
2020/02/09 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
python zip()函数的使用示例
2020/09/23 Python
解决PDF 转图片时丢文字的一种可能方式
2021/03/04 Python
CSS3的RGBA中关于整数和百分比值的转换
2015/08/04 HTML / CSS
香港化妆品经销商:我的公主
2016/08/05 全球购物
单身旅行者的单身假期:Just You
2018/04/08 全球购物
工地宣传标语
2014/06/18 职场文书
春游踏青活动方案
2014/08/14 职场文书
兵马俑的导游词
2015/02/02 职场文书
2015年房产销售工作总结范文
2015/05/22 职场文书
志愿者工作心得体会
2016/01/15 职场文书
python实现socket简单通信的示例代码
2021/04/13 Python