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函数，希望大家继续关注2015-12-12
本文是笔者看了eventemitter3 和 Node.js 事件模块源码后实现的 EventEmitter 。JavaScript 事件很重要，希望看了这篇文章的你们能有所收获2018-03-03
这篇文章主要介绍了PHP实现的各种中文编码转换类分享,本文类库支持简体中文、繁体中文、GB2312、BIG5、UTF-8等多种格式之间的转换,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了JavaScript使用简单正则表达式的数据验证功能,结合实例形式分析了JS针对表单输入内容的简单正则验证操作技巧,需要的朋友可以参考下2017-01-01
本篇文章主要是对javascript 实现子父窗体互相传值的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
这篇文章主要介绍了JS操作COOKIE实现备忘记录的方法,涉及JavaScript针对cookie的读写操作相关技巧,需要的朋友可以参考下2016-04-04
下面小编就为大家分享一篇javascript实现Emrips反质数枚举的示例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
这篇文章主要介绍了JavaScript自定义函数的相关资料，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-07-07
这篇文章主要为大家详细介绍了JS实现简单拖动模态框案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
javascript的trim,ltrim,rtrim自定义函数
今天用到javascript去掉一个文本框中字符串两端的空格，开始还以为有trim，ltrim，rtrim函数（asp中有这三个函数，弄混了），结果找半天，没有找到。最后找到用正则实现这样功能的自定义函数。2008-09-09
最新评论