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里面。

我们来看一个小例子

|__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

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

相关文章

  • 整理Javascript函数学习笔记

    整理Javascript函数学习笔记

    整理Javascript函数学习笔记,之前一系列的文章是跟我学习Javascript,本文就是进一步学习Javascript函数,希望大家继续关注
    2015-12-12
  • 理解 JavaScript EventEmitter

    理解 JavaScript EventEmitter

    本文是笔者看了eventemitter3 和 Node.js 事件模块源码后实现的 EventEmitter 。JavaScript 事件很重要,希望看了这篇文章的你们能有所收获
    2018-03-03
  • PHP实现的各种中文编码转换类分享

    PHP实现的各种中文编码转换类分享

    这篇文章主要介绍了PHP实现的各种中文编码转换类分享,本文类库支持简体中文、繁体中文、GB2312、BIG5、UTF-8等多种格式之间的转换,需要的朋友可以参考下
    2015-01-01
  • JavaScript使用简单正则表达式的数据验证功能示例

    JavaScript使用简单正则表达式的数据验证功能示例

    这篇文章主要介绍了JavaScript使用简单正则表达式的数据验证功能,结合实例形式分析了JS针对表单输入内容的简单正则验证操作技巧,需要的朋友可以参考下
    2017-01-01
  • javascript 实现子父窗体互相传值的简单实例

    javascript 实现子父窗体互相传值的简单实例

    本篇文章主要是对javascript 实现子父窗体互相传值的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • JS操作COOKIE实现备忘记录的方法

    JS操作COOKIE实现备忘记录的方法

    这篇文章主要介绍了JS操作COOKIE实现备忘记录的方法,涉及JavaScript针对cookie的读写操作相关技巧,需要的朋友可以参考下
    2016-04-04
  • javascript实现Emrips反质数枚举的示例代码

    javascript实现Emrips反质数枚举的示例代码

    下面小编就为大家分享一篇javascript实现Emrips反质数枚举的示例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • 详解JavaScript自定义函数

    详解JavaScript自定义函数

    这篇文章主要介绍了JavaScript自定义函数的相关资料,文中讲解非常细致,代码帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-07-07
  • JS实现简单拖动模态框案例

    JS实现简单拖动模态框案例

    这篇文章主要为大家详细介绍了JS实现简单拖动模态框案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • javascript的trim,ltrim,rtrim自定义函数

    javascript的trim,ltrim,rtrim自定义函数

    今天用到javascript去掉一个文本框中字符串两端的空格,开始还以为有trim,ltrim,rtrim函数(asp中有这三个函数,弄混了),结果找半天,没有找到。最后找到用正则实现这样功能的自定义函数。
    2008-09-09

最新评论