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 相关文章推荐
10个基于浏览器的JavaScript调试工具分享
Feb 07 Javascript
jquery实现table鼠标经过变色代码
Sep 25 Javascript
Javascript中call的两种用法实例
Dec 13 Javascript
JavaScript给url网址进行encode编码的方法
Mar 18 Javascript
js获取页面description的方法
May 21 Javascript
jquery中checkbox使用方法简单实例演示
Nov 24 Javascript
使用开源工具制作网页验证码的方法
Oct 17 Javascript
Vue.js组件tree实现省市多级联动
Dec 02 Javascript
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
vue 1.0 结合animate.css定义动画效果
Jul 11 Javascript
微信小程序发送短信验证码完整实例
Jan 07 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
Aug 04 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实现的下载css文件中的图片的代码
2010/02/08 PHP
PHP提取数据库内容中的图片地址并循环输出
2010/03/21 PHP
PHP安全防范技巧分享
2011/11/03 PHP
jquery 图片Silhouette Fadeins渐显效果
2010/02/07 Javascript
JS增加行复制行删除行的实现代码
2013/11/09 Javascript
JQuery中使用ajax传输超大数据的解决方法
2014/07/14 Javascript
JS常用算法实现代码
2016/11/14 Javascript
基于React实现表单数据的添加和删除详解
2017/03/14 Javascript
详解使用vue实现tab 切换操作
2017/07/03 Javascript
node实现简单的反向代理服务器
2017/07/26 Javascript
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
微信小程序扫描二维码获取信息实例详解
2019/05/07 Javascript
微信小程序使用蓝牙小插件
2019/09/23 Javascript
vue解决使用$http获取数据时报错的问题
2019/10/30 Javascript
[03:39]这就是刀塔,我们是冠军!燃情短片讲述我们的DOTA故事
2019/07/02 DOTA
Python查找两个有序列表中位数的方法【基于归并算法】
2018/04/20 Python
python3.6数独问题的解决
2019/01/21 Python
Django框架文件上传与自定义图片上传路径、上传文件名操作分析
2019/05/10 Python
python按修改时间顺序排列文件的实例代码
2019/07/25 Python
解决在pycharm运行代码,调用CMD窗口的命令运行显示乱码问题
2019/08/23 Python
pytorch之Resize()函数具体使用详解
2020/02/27 Python
jupyter notebook tensorflow打印device信息实例
2020/04/20 Python
Keras Convolution1D与Convolution2D区别说明
2020/05/22 Python
利用HTML5绘制点线面组成的3D图形的示例
2015/05/12 HTML / CSS
日本最大的彩色隐形眼镜销售网站:CharmColor
2020/09/09 全球购物
工作交流会欢迎词
2014/01/12 职场文书
服务员岗位职责
2014/01/29 职场文书
校运会入场式解说词
2014/02/10 职场文书
十一酒店活动方案
2014/02/20 职场文书
领导接待方案
2014/03/13 职场文书
上党课的心得体会
2014/09/02 职场文书
未受刑事制裁公证证明
2014/09/20 职场文书
2014年副班长工作总结
2014/12/10 职场文书
银行反洗钱宣传活动总结
2015/05/08 职场文书
电话营销开场白
2015/05/29 职场文书
vue 自定义组件添加原生事件
2022/04/21 Vue.js