webpack css加载和图片加载的方法示例
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
css加载器
在webpack中,所有的资源(js文件、css文件、模板文件,图片文件等等)都被看成是一个模块,因此多有的资源都是可以被加载的。
加载这些资源我们要在module属性定义这些加载配置(指定加载器)。
在module属性中,通过定义loaders定义加载器,其属性值是一个数组,每一个成员代表一个配置。
- 通过test定义匹配的规则(正则表达式)
- 通过loader定义加载器,可以通过!级联多个加载器
加载css是要两个加载器,一个是style-loader,一个是css-loader样式文件默认加载到head里面。
我们来看一个小例子
app.css
app.js
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 ; } .test 1 { background-image : url ( "./images/test1.png" ); } .test 2 { background-image : url ( "./images/test2.jpg" ); } .test 3 { 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
再次查看dest.js
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
在iframe中使bootstrap的模态框在父页面弹出问题
这篇文章主要介绍了在iframe中使bootstrap的模态框在父页面弹出问题,解决方法非常不错,具有参考借鉴价值,需要的朋友可以参考下2017-08-08
最新评论