webpack css加载和图片加载的方法示例

 更新时间:2018年09月11日 09:55:11   作者:connie__wu  
这篇文章主要介绍了webpack css加载和图片加载的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

css加载器

在webpack中,所有的资源(js文件、css文件、模板文件,图片文件等等)都被看成是一个模块,因此多有的资源都是可以被加载的。

加载这些资源我们要在module属性定义这些加载配置(指定加载器)。

在module属性中,通过定义loaders定义加载器,其属性值是一个数组,每一个成员代表一个配置。

  • 通过test定义匹配的规则(正则表达式)
  • 通过loader定义加载器,可以通过!级联多个加载器

加载css是要两个加载器,一个是style-loader,一个是css-loader样式文件默认加载到head里面。

我们来看一个小例子

1
2
3
4
5
6
|__static
  |__css
    |__app.css
  |__app.js
|__ index.html
|__webpack.config.js

app.css

1
2
3
4
5
6
h1{
  background:red;
  width:100px;
  height:100px;
  color:blue;
}

app.js

1
2
require('./css/app.css')
document.write('<h1>hello connie</h1>')

index.html

1
2
3
4
5
6
7
8
9
10
<!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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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

1
2
npm install url-loader
npm install file-loader

再次查看dest.js

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:https://blog.csdn.net/connie_1990/article/details/72852380

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • 根据分辩率调用不同的CSS.

    根据分辩率调用不同的CSS.

    根据分辩率调用不同的CSS....
    2007-01-01
  • JavaScript DOM事件(笔记)

    JavaScript DOM事件(笔记)

    这篇文章主要介绍了JavaScript DOM事件(笔记) ,需要的朋友可以参考下
    2015-04-04
  • javascript 流畅动画实现原理

    javascript 流畅动画实现原理

    浏览器目前来说是没有抗锯齿效果的(将来不一定哦),这样dom元素外观的改变就被限制在1个像素为最佳效果。

    2009-09-09
  • javascript对中文按照拼音排序代码

    javascript对中文按照拼音排序代码

    将中文编入数组,调用数组的sort方法,再用到一个localeCompare即可实现中文排序,需要的朋友可以参考下
    2014-08-08
  • 在iframe中使bootstrap的模态框在父页面弹出问题

    在iframe中使bootstrap的模态框在父页面弹出问题

    这篇文章主要介绍了在iframe中使bootstrap的模态框在父页面弹出问题,解决方法非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-08-08
  • 25个好玩的JavaScript小游戏分享

    25个好玩的JavaScript小游戏分享

    JavaScript 早已不只是一门写写网页特效的脚本语言了,如今广泛用于网站的前端交互。
    2011-04-04
  • ajax在js中和jQuery中的用法实例详解

    ajax在js中和jQuery中的用法实例详解

    Ajax被认为是(Asynchronous(异步) JavaScript And Xml的缩写),现在允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax,下面这篇文章主要给大家介绍了关于ajax在js中和jQuery中的用法,需要的朋友可以参考下
    2021-08-08
  • webpack中的热刷新与热加载的区别

    webpack中的热刷新与热加载的区别

    本篇文章主要介绍了webpack中的热刷新与热加载的区别,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • JS字符串补全方法padStart()和padEnd()

    JS字符串补全方法padStart()和padEnd()

    这篇文章主要介绍了JS字符串补全方法padStart()和padEnd(),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • JavaScript实现时钟功能

    JavaScript实现时钟功能

    这篇文章主要为大家详细介绍了JavaScript实现时钟功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06

最新评论