如何使用webpack 打包图片
最近在学习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 打包图片的更多相关文章
- 关于webpack打包图片的路径问题
在webpack打包的时候,用css-loader的时候,在css文件里用的引用的背景的图片的时候,如果是url()...那么里面的路径不能用相对路径,得用绝对路径,而且必须是带http的,幸好,,, ...
- webpack 打包图片 能否提高加载速度
正常加载: 打包图片: 结论:当加载资源 数量很多 时,可以提高加载速度
- vue-cli || webpack 打包的时候css里面写的背景图片的路径出错问题
.bg width 100% position fixed left 0 top 0 height 100vh z-index -1 background url('~@/assets/imgs/bg ...
- 10. vue之webpack打包详解
一.什么是webpack webpack官网给出的定义是 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应 ...
- vue项目 webpack打包后,图片路径是绝对路径
vue项目,使用webpack打包,虽然在全局把路径改成了相对的路径,但是图片引用的路径还是异常的,解决办法如下: 1.config文件夹下index.js中: assetsPublicPath:&q ...
- webpack提取图片文件打包压缩
抽离图片文件打包到指定路径下 压缩抽离的图片资源 配置生成html中的图片路径 一.准备测试环境 //工作区间 src//文件夹 index.js//入口文件 index.css//样式文件 inde ...
- webpack打包js,css和图片
1.webpack打包默认配置文件webpack.config.js 2.打包js文件:有这个文件并配置可以直接在cmd上webpack打包,没有这个文件要在cmd上输入 webpack main.j ...
- 使用webpack打包ThinkPHP的资源文件
使用webpack打包ThinkPHP的资源文件 利用自己的空余时间一直在维护http://www.wx2share.com这个小网站,全是一个人在弄,由于只租得起虚拟空间,所以后台采用了简单方便的T ...
- Webpack打包进阶
说在前面 由于使用了React直出,页面各项性能指标使人悦目.本篇将深入探讨目前PC部落所采用webpack打包优化策略,以及探讨PC部落并未使用的 webpack Code Splitting 代码 ...
随机推荐
- C# Winform DotNetBar控件之StyleManager
这个控件作用改变窗体样式 使用方法 拖拽一个styleManager到窗体 改变它的managerStyle,再把窗体的继承改成Office2007Form 最后一步窗体初始化控件前 改掉的Enabl ...
- JVM调优参数设置?
-Xms20M 表示设置堆容量的最小值为20M,必须以M为单位 -Xmx20M 表示设置堆容量的最大值为20M,必须以M为单位.将-Xmx和-Xms设置为一样可以避免堆自动扩展.大的项目-Xmx和-X ...
- C语言结构体和函数
#include <stdio.h> struct Person { char *name; }; void change1(struct Person p); void change2( ...
- java oop第15章_Socket网络编程
一. TCP/IP协议(Transmission Control Protocol/Internet Protocol)传输控制协议/Internet协议,是通信领域的基础.核心协议, 其他的协议 ...
- EF批量添加
1.首先,打开工具——NuGet包管理器——管理解决方案的NoGet程序包——搜索Z.EntityFramework.Extensions 点击安装!!! codefirst定义一个实体,用EF的方法 ...
- springcloud -zuul(1-zuul的简单使用)
1.maven引入包 <dependency> <groupId>org.springframework.cloud</groupId> <artifactI ...
- Andriod Unity 调用android函数
//首先这是一个前沿 //我看了多的资料,还看了近半个小时的 android activity 的讲解 终于打出了apk //接下来开始 //一步一步的跟着我走 1.创建一个android项目或者一个 ...
- 关于ThreadLocal的一道面试题(酷我公司)
2013年8月,本人那时候刚毕业来到了北京找工作,在网上投递了各种简历,也面试了很多家公司,遇到最大的问题就是:你什么时候毕业的呀?,做过什么项目呀?都将我拒之门外,但是我还是幸运总会来的,那天早上9 ...
- [C#]记录一次异常排查,关于using语法、sqlserver数据库session、DBHelper类
最近在做一个基于asp.net和sqlserver的网站项目,发现网站运行一段时间之后,会报异常: 超时时间已到,但是尚未从池中获取连接.出现这种情况可能是因为所有池连接均在使用,并且达到了最大池大小 ...
- python 使用abc实现接口类/虚类(2.2)
python 使用abc实现接口类/虚类 具体类 class BaseA: def run(self): print('base A running') class ChildA(BaseA): de ...