最近在学习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. el-select 1.4.x版本实现2.x.x版本的reserve-keyword功能

    今天在维护以前的项目时,发现了一个小bug,其实也不算是bug,只是客户对这个控件的体验不是很满意. 我们在element 2.x.x的版本的官方文档中可以发现el-select组件的属性中比1.x. ...

  2. Ansible随笔8

    自定义模块的开发模式 1.决定自定义模块的存放路径 编辑/etc/ansible/ansible.cfg文件,修改library = /usr/share/ansible/. 这样就告诉ansible ...

  3. OAuth2.0实例说明

    OAuth2.0 详细实列+Word文档清晰说明 实例下载地址:https://files.cnblogs.com/files/liyanbofly/OAuth2.0%E5%AE%9E%E4%BE%8 ...

  4. SQLite 小调研

    一. 概况: SQLite 是 D. Richard Hipp 于 2000 年采用 C 语言编写的一个轻量级.跨平台的关系型数据库,支持大部分 SQL92 标准(比如视图.事务.触发器.blob 数 ...

  5. 淘宝内核月报2014-11-draft

    内核月报2014-11-draft MySQL· 捉虫动态·OPTIMIZE 不存在的表 bug 描述 这是一个和 GTID 相关的Bug,也就是说5.6才会有,并且出现这个 bug 需要满足条件: ...

  6. 2018-2-13-win10-UWP-动画

    title author date CreateTime categories win10 UWP 动画 lindexi 2018-2-13 17:23:3 +0800 2018-2-13 17:23 ...

  7. 文件上传到ftp服务工具类

    直接引用此java工具类就好 import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundExcep ...

  8. Linux下Qt调用共享库文件.so

    修改已有的pro文件,添加如下几句: INCLUDEPATH += /home/ubuntu/camera/camera/LIBS += -L/home/ubuntu/camera/camera -l ...

  9. Java SE(1)

    Java SE基础回顾 1.循环语句中的break是终止全部循环,跳出循环体:而continue是终止本次循环,跳执行下一循环 2.return语句有两个作用:返回值:结束方法的运行 3.对于java ...

  10. JavaWeb学习篇之----Session&&Cookie

    今天继续来看看JavaWeb的相关知识,这篇文章主要来讲一下Session和Cookie的相关知识,首先我们来看一下Cookie的相关知识: 一.Cookie 简介: Cookie是客户端技术,服务器 ...