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 相关文章推荐
基于JQuery的动态删除Table表格的行和列的代码
May 12 Javascript
JQury slideToggle闪烁问题及解决办法
Jul 05 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
Apr 26 Javascript
javascript模拟post提交隐藏地址栏的参数
Sep 03 Javascript
详解JavaScript编程中正则表达式的使用
Oct 25 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
Apr 19 Javascript
JavaScript中原型链存在的问题解析
Sep 25 Javascript
AngularJS动态菜单操作指令
Apr 25 Javascript
vue 实现全选全不选的示例代码
Mar 29 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 Javascript
layui-table对返回的数据进行转变显示的实例
Sep 04 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
Jan 15 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
《神奇女侠:血脉》神力女超人大战犯罪公司
2020/04/09 欧美动漫
PHP中使用memcache存储session的三种配置方法
2014/04/05 PHP
详解php中生成标准uuid(guid)的方法
2019/04/28 PHP
laravel利用中间件做防非法登录和权限控制示例
2019/10/21 PHP
一段实时更新的时间代码
2006/07/07 Javascript
jquery中的sortable排序之后的保存状态的解决方法
2010/01/28 Javascript
分析Node.js connect ECONNREFUSED错误
2013/04/09 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
2015/05/16 Javascript
ECMAScript6函数默认参数
2015/06/12 Javascript
浅谈Nodejs观察者模式
2015/10/13 NodeJs
JavaScript获取页面中超链接数量的方法
2015/11/09 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
2016/06/21 Javascript
js 定位到某个锚点的方法
2016/11/19 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
2016/11/21 Javascript
JavaScript优化以及前段开发小技巧
2017/02/02 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
2017/05/02 Javascript
jQuery异步提交表单实例
2017/05/30 jQuery
JS实现预加载视频音频/视频获取截图(返回canvas截图)
2017/10/09 Javascript
浅谈redux, koa, express 中间件实现对比解析
2019/05/23 Javascript
layui 实现table翻页滚动条位置保持不变的例子
2019/09/05 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
2020/11/02 Javascript
[01:33]真香警告!DOTA2勇士令状不朽珍藏Ⅱ饰品欣赏
2018/06/26 DOTA
Python字典推导式将cookie字符串转化为字典解析
2019/08/10 Python
django创建超级用户过程解析
2019/09/18 Python
Pytorch转keras的有效方法,以FlowNet为例讲解
2020/05/26 Python
Python如何使用input函数获取输入
2020/08/06 Python
深入解读CSS3中transform变换模型的渲染
2016/05/27 HTML / CSS
吃透移动端 1px的具体用法
2019/12/16 HTML / CSS
分厂厂长岗位职责
2013/12/29 职场文书
服务理念口号
2014/06/11 职场文书
法学专业毕业生自荐信
2014/06/11 职场文书
《中国梦我的梦》中学生演讲稿
2014/08/20 职场文书
2014派出所所长群众路线对照检查材料思想汇报
2014/09/18 职场文书
课堂打架检讨书200字
2014/11/21 职场文书
2016新春团拜会致辞
2015/08/01 职场文书
Python Parser的用法
2021/05/12 Python