最近在学习vue,需要用到webpack打包css,在webpack中文网https://www.webpackjs.com/里只有css的打包配置,

在编写css样式时,因为要引入 背景图片,打包时webpack就会报错,css样式如下:

使用webpack打包时报的错误如下图:

开始以为是自己的图片路径写错了,又仔细的阅读了下webpack的loader ,才知道是图片的url路没有配置,那么loader到底是什么呢?

webpack中文网上的解释如下:

看完之后,,还是不懂。。。。。。。。

不得已,只好去webpack官网找答案了,http://webpack.github.io/docs/usage.html,凭借着我不屈不挠的精神,终于在官网里找到一一句“有很多不同的装载器,你可以用来包括文件在你的应用程序包,包括CSS和图像加载器”,简直是我的救命草啊,点击“装载器”

进入到装载器列表页,找到打包,如下:

原来在 webpack 中引入图片需要依赖 url-loader 这个加载器。既然找到原因了,那么问题就好办了,只要引入就行来:

1、安装URL-loader 加载器

npm install url-loader --save-dev          

2、配置webpack的config.js 文件

module: {
loaders: [
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{ test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'},
{ test: /\.png$/, loader: "file-loader?name=images/[hash:8].[name].[ext]" }
], }

test 属性代表可以匹配的图片类型,除了 png、jpg 之外也可以添加 gif 等,以竖线隔开即开。

loader 后面 limit 字段代表图片打包限制,这个限制并不是说超过了就不能打包,而是指当图片大小小于限制时会自动转成 base64 码引用。上例中大于8192字节的图片正常打包,小于8192字节的图片以 base64 的方式引用。

url-loader 后面除了 limit 字段,还可以通过 name 字段来指定图片打包的目录与文件名

3、输入打包命令,运行结果如下:

4、打包前我的项目目录如下:

5、打包后images里生成了一个打包后的图片:

参考文档:webpack中文网http://webpackdoc.com/loader.html

      webpack 官网http://webpack.github.io/docs/

如何使用webpack 打包图片的更多相关文章

  1. 关于webpack打包图片的路径问题

    在webpack打包的时候,用css-loader的时候,在css文件里用的引用的背景的图片的时候,如果是url()...那么里面的路径不能用相对路径,得用绝对路径,而且必须是带http的,幸好,,, ...

  2. webpack 打包图片 能否提高加载速度

    正常加载: 打包图片: 结论:当加载资源 数量很多 时,可以提高加载速度

  3. vue-cli || webpack 打包的时候css里面写的背景图片的路径出错问题

    .bg width 100% position fixed left 0 top 0 height 100vh z-index -1 background url('~@/assets/imgs/bg ...

  4. 10. vue之webpack打包详解

    一.什么是webpack webpack官网给出的定义是 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应 ...

  5. vue项目 webpack打包后,图片路径是绝对路径

    vue项目,使用webpack打包,虽然在全局把路径改成了相对的路径,但是图片引用的路径还是异常的,解决办法如下: 1.config文件夹下index.js中: assetsPublicPath:&q ...

  6. webpack提取图片文件打包压缩

    抽离图片文件打包到指定路径下 压缩抽离的图片资源 配置生成html中的图片路径 一.准备测试环境 //工作区间 src//文件夹 index.js//入口文件 index.css//样式文件 inde ...

  7. webpack打包js,css和图片

    1.webpack打包默认配置文件webpack.config.js 2.打包js文件:有这个文件并配置可以直接在cmd上webpack打包,没有这个文件要在cmd上输入 webpack main.j ...

  8. 使用webpack打包ThinkPHP的资源文件

    使用webpack打包ThinkPHP的资源文件 利用自己的空余时间一直在维护http://www.wx2share.com这个小网站,全是一个人在弄,由于只租得起虚拟空间,所以后台采用了简单方便的T ...

  9. Webpack打包进阶

    说在前面 由于使用了React直出,页面各项性能指标使人悦目.本篇将深入探讨目前PC部落所采用webpack打包优化策略,以及探讨PC部落并未使用的 webpack Code Splitting 代码 ...

随机推荐

  1. 45-Ubuntu-用户管理-10-chmod修改文件|目录权限

    1.将a.py的权限修改为u=rwx, g=r-x, o=r--. 2.将目录test及子目录和文件权限修改为u=rwx, g=rwx, o=r-x.

  2. Java泛型中extends和super的区别?

    <? extends T>和<? super T>是Java泛型中的"通配符(Wildcards)"和"边界(Bounds)"的概念. ...

  3. 富文本编辑器 CKeditor 配置使用+上传图片

    参考文献: 富文本编辑器 CKeditor 配置使用 CKEditor与CKFinder的配置(ASP.NET环境),老版本可以参考 CKEditor+CKFinder ASP版在本地电脑中的配置  ...

  4. IDEA2017.3.1破解激活

    idea激活有多种方式,网上较多的是使用注册码或者填License server网址,目前(2017年8月19日)使用注册码的方式,亲测可用的只有lanyun提供的注册码,但是会在2017年11月份的 ...

  5. CAS机制是什么?有什么缺点,会出现什么问题

    CAS是英文单词Compare And Swap的缩写,翻译过来就是比较并替换. CAS机制当中使用了3个基本操作数:内存地址V,旧的预期值A,要修改的新值B. CAS的缺点: 1.CPU开销较大 在 ...

  6. Echart中X轴为时间坐标刻度时,后台返回时间List被强制转化为时间戳问题

    if(recordlist!=null&&recordlist.size()>0) { for (Record record : recordlist) { //根据频次决定使用 ...

  7. java动态代理--proxy&cglib

    大纲 代理 proxy cglib 小结 一.代理 为什么要用代理?其实就是希望不修改对象的情况下,增强对象. 静态代理: 静态代理模式,需要代理类和目标类实现同一接口,代理类的方法调用目标类的方法, ...

  8. chkconfig 与 systemctl

    chkconfig命令 主要用来更新(启动或停止)和查询系统服务(service)的运行级信息,用于维护/etc/rc[0-6].d目录的命令行工具. chkconfig -–add httpd 增加 ...

  9. delphi xe10 文件目录/路径操作 (Andorid、ios)

    //获取临时文件路径(支持安卓.IOS) function GeFileName(const AFileName: string): string; begin {$IFDEF ANDROID} Re ...

  10. 安装zabbix需求环境

    yum install gcc gcc-c++ make mysql-server mysql-devel libcurl-devel net-snmp-devel php php-ldap php- ...