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 表格排序和表头浮动效果(扩展SortTable)
Apr 07 Javascript
JQuery从头学起第二讲
Jul 04 Javascript
jquery下实现overlay遮罩层代码
Aug 25 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
Mar 11 Javascript
jquery ajax方式直接提交整个表单核心代码
Aug 15 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
Jun 11 Javascript
微信小程序中子页面向父页面传值实例详解
Mar 20 Javascript
老生常谈Bootstrap媒体对象
Jul 06 Javascript
react native实现往服务器上传网络图片的实例
Aug 07 Javascript
Vue 2.0入门基础知识之内部指令详解
Oct 15 Javascript
使用Bootrap和Vue实现仿百度搜索功能
Oct 26 Javascript
js函数柯里化的方法和作用实例分析
Apr 11 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 数字左侧自动补0
2008/03/31 PHP
PHP 远程关机实现代码
2009/11/10 PHP
PHP 5.3新特性命名空间规则解析及高级功能
2010/03/11 PHP
PHP 杂谈《重构-改善既有代码的设计》之三 重新组织数据
2012/04/09 PHP
php实现过滤表单提交中html标签的方法
2014/10/17 PHP
简单的pgsql pdo php操作类实现代码
2016/08/25 PHP
jquery 元素相对定位代码
2010/10/15 Javascript
Chrome Form多次提交表单问题的解决方法
2011/05/09 Javascript
express的中间件basicAuth详解
2014/12/04 Javascript
一道关于JavaScript变量作用域的面试题
2016/03/08 Javascript
总结十个Angular.js由浅入深的面试问题
2016/08/26 Javascript
jQuery通过ajax快速批量提交表单数据
2016/10/25 Javascript
js实现下一页页码效果
2017/03/07 Javascript
webpack配置文件和常用配置项介绍
2017/04/28 Javascript
详解AngularJS ng-class样式切换
2017/06/27 Javascript
深入浅析Vue不同场景下组件间的数据交流
2017/08/15 Javascript
vue2.0移除或更改的一些东西(移除index key)
2017/08/28 Javascript
使用Angular CLI生成路由的方法
2018/03/24 Javascript
关于Mac下安装nodejs、npm和cnpm的教程
2018/04/11 NodeJs
React 组件间的通信示例
2018/06/14 Javascript
跟混乱的页面弹窗说再见
2019/04/11 Javascript
深入了解JavaScript 私有化
2019/05/30 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
2019/10/25 Javascript
Python利用pyHook实现监听用户鼠标与键盘事件
2014/08/21 Python
python简单线程和协程学习心得(分享)
2017/06/14 Python
Django中使用Whoosh进行全文检索的方法
2019/03/31 Python
python 遍历pd.Series的index和value
2019/11/26 Python
python使用协程实现并发操作的方法详解
2019/12/27 Python
pycharm设置默认的UTF-8编码模式的方法详解
2020/06/01 Python
Django模板报TemplateDoesNotExist异常(亲测可行)
2020/12/18 Python
ABOUT YOU罗马尼亚:超过600个时尚品牌
2019/09/19 全球购物
法国在线药房:Shop Pharmacie
2019/11/26 全球购物
法学专业应届生求职信
2013/10/16 职场文书
班委竞选演讲稿
2014/04/28 职场文书
与Windows10相比Windows11有哪些改进?值不值得升级?
2021/11/21 数码科技
Java中的随机数Random
2022/03/17 Java/Android