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 相关文章推荐
csdn 批量接受好友邀请
Feb 19 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
Mar 05 Javascript
js+HTML5实现视频截图的方法
Jun 16 Javascript
很棒的js Tab选项卡切换效果
Aug 30 Javascript
JavaScript 闭包机制详解及实例代码
Oct 10 Javascript
详解Javascript中的原型OOP
Oct 12 Javascript
浅谈Webpack打包优化技巧
Jun 12 Javascript
如何在Vue.js中实现标签页组件详解
Jan 02 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
Mar 19 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
Oct 31 Javascript
vue实现日历表格(element-ui)
Sep 24 Javascript
js 执行上下文和作用域的相关总结
Feb 08 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 读取shell管道传输过来的内容
2010/03/01 PHP
九个你必须知道而且又很好用的php函数和特点
2013/08/08 PHP
PHP加密函数 Javascript/Js 解密函数
2013/09/23 PHP
php post大量数据时发现数据丢失问题解决方法
2015/06/20 PHP
PHP实现C#山寨ArrayList的方法
2015/07/16 PHP
php安装ssh2扩展的方法【Linux平台】
2016/07/20 PHP
解析 thinkphp 框架中的部分方法
2017/05/07 PHP
PHP按一定比例压缩图片的方法
2018/10/12 PHP
PHP 范围解析操作符(::)用法分析【访问静态成员和类常量】
2020/04/14 PHP
JavaScript实现页面滚动图片加载(仿lazyload效果)
2011/07/22 Javascript
js局部刷新页面时间具体实现
2013/07/04 Javascript
仿百度联盟对联广告实现代码
2014/08/30 Javascript
浅谈jQuery事件绑定原理
2015/01/02 Javascript
jQuery动态背景图片效果实现方法
2015/07/03 Javascript
Node.js重新刷新session过期时间的方法
2016/02/04 Javascript
javascript弹出带文字信息的提示框效果
2016/07/19 Javascript
在vue中使用jointjs的方法
2018/03/24 Javascript
js html实现计算器功能
2018/11/13 Javascript
PM2自动部署代码步骤流程总结
2018/12/10 Javascript
node.js处理前端提交的GET请求
2019/08/30 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
[04:13]2018国际邀请赛典藏宝瓶Ⅱ饰品一览
2018/07/21 DOTA
python 将有序数组转换为二叉树的方法
2019/03/26 Python
安装Pycharm2019以及配置anconda教程的方法步骤
2019/11/11 Python
将python包发布到PyPI和制作whl文件方式
2019/12/25 Python
Python内置函数及功能简介汇总
2020/10/13 Python
pyx文件 生成pyd 文件用于 cython调用的实现
2021/03/04 Python
CSS3中Transition动画属性用法详解
2016/07/04 HTML / CSS
html5 的a标签 Href 拨电话的写法
2013/11/04 HTML / CSS
会计学财务管理专业个人的自我评价
2013/10/19 职场文书
门诊挂号室室长岗位职责
2013/11/27 职场文书
会计找工作求职信范文
2013/12/09 职场文书
浪漫婚礼主题活动策划方案
2014/09/15 职场文书
校友回访母校寄语
2015/02/26 职场文书
民政局未婚证明
2015/06/15 职场文书
浅谈MySQL next-key lock 加锁范围
2021/06/07 MySQL