如何使用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 代码 ...
随机推荐
- myEclipse环境下配置springMvc项目,进行简单的请求
1."File-->New-->WebProject"新建一个web项目,命名为springMvc 2.将所需要用到的jar包复制到WEB-INF/lib路径下,然后右 ...
- SpringMVC和spring常见面试题总结
1.什么是Spring MVC ?简单介绍下你对springMVC的理解? Spring MVC是一个基于Java的实现了MVC设计模式的请求驱动类型的轻量级Web框架,通过把Model,View,C ...
- vue之自定义指令
1.自定义指令的作用 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的情况下,你仍 ...
- c 语言函数分析
第一个参数为指向线程标识符的指针. 第二个参数用来设置线程属性. 第三个参数是线程运行函数的起始地址. 最后一个参数是运行函数的参数. result = pthread_create(&tid ...
- es6学习(一)
之前一直听说es6,断断续续看过阮一峰老师的"ECMAScript 6 入门",觉得写得很好,但由于实际项目中没用到,所以并没有过多的去研究(人的惰性在我这里表现的淋漓尽致).直到 ...
- CGLIB 详解
依赖 <dependency> <groupId>cglib</groupId> <artifactId>cglib</artifactId> ...
- SQL Server SQLBindCol
说明 编辑 版本引入:ODBC 1.0 遵从标准:ISO 92 功能说明: SQLBindCol将应用程序的数据缓冲绑定到结果集的各列 函数原型: SQLRETURN SQLBindCol( SQLH ...
- Delphi 中多线程同步的一些处理方法
Delphi 中多线程同步的一些处理方法 当创建了多个线程,并且多个线程都要访问同一资源,,就有可能出现混乱,于是用Synchronize来控制,使同一时间只有一个线程使用那部分资源,Synchr ...
- GDI+用PNG图片做半透明异型窗口
http://hi.baidu.com/bluew/blog/item/2ecbe58bf93a937d9f2fb4de.html2007-08-09 00:52 我是用PNG图片Alpha透明的方式 ...
- 执行SQL语句---INSERT/UPDATE/DELETE
1.执行SQL语句函数: int mysql_query(MYSQL* mysql, const char * query); query:所有的sql语句 2.例子: 向children表插入一条语 ...