最近在学习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. C# Winform DotNetBar控件之StyleManager

    这个控件作用改变窗体样式 使用方法 拖拽一个styleManager到窗体 改变它的managerStyle,再把窗体的继承改成Office2007Form 最后一步窗体初始化控件前 改掉的Enabl ...

  2. JVM调优参数设置?

    -Xms20M 表示设置堆容量的最小值为20M,必须以M为单位 -Xmx20M 表示设置堆容量的最大值为20M,必须以M为单位.将-Xmx和-Xms设置为一样可以避免堆自动扩展.大的项目-Xmx和-X ...

  3. C语言结构体和函数

    #include <stdio.h> struct Person { char *name; }; void change1(struct Person p); void change2( ...

  4. java oop第15章_Socket网络编程

    一.   TCP/IP协议(Transmission Control Protocol/Internet Protocol)传输控制协议/Internet协议,是通信领域的基础.核心协议, 其他的协议 ...

  5. EF批量添加

    1.首先,打开工具——NuGet包管理器——管理解决方案的NoGet程序包——搜索Z.EntityFramework.Extensions 点击安装!!! codefirst定义一个实体,用EF的方法 ...

  6. springcloud -zuul(1-zuul的简单使用)

    1.maven引入包 <dependency> <groupId>org.springframework.cloud</groupId> <artifactI ...

  7. Andriod Unity 调用android函数

    //首先这是一个前沿 //我看了多的资料,还看了近半个小时的 android activity 的讲解 终于打出了apk //接下来开始 //一步一步的跟着我走 1.创建一个android项目或者一个 ...

  8. 关于ThreadLocal的一道面试题(酷我公司)

    2013年8月,本人那时候刚毕业来到了北京找工作,在网上投递了各种简历,也面试了很多家公司,遇到最大的问题就是:你什么时候毕业的呀?,做过什么项目呀?都将我拒之门外,但是我还是幸运总会来的,那天早上9 ...

  9. [C#]记录一次异常排查,关于using语法、sqlserver数据库session、DBHelper类

    最近在做一个基于asp.net和sqlserver的网站项目,发现网站运行一段时间之后,会报异常: 超时时间已到,但是尚未从池中获取连接.出现这种情况可能是因为所有池连接均在使用,并且达到了最大池大小 ...

  10. python 使用abc实现接口类/虚类(2.2)

    python 使用abc实现接口类/虚类 具体类 class BaseA: def run(self): print('base A running') class ChildA(BaseA): de ...