webpack踩坑之路图片的路径与打包


Posted in Javascript onSeptember 05, 2017

刚开始用webpack的同学很容易掉进图片打包这个坑里,比如打包出来的图片地址不对或者有的图片并不能打包进我们的目标文件夹里(bundle)。下面我们就来分析下在webpack项目中图片的应用场景。

在实际生产中有以下几种图片的引用方式:

1. HTML文件中img标签的src属性引用或者内嵌样式引用

<img src="photo.jpg" />
<div style="background:url(photo.jpg)"></div>

2. CSS文件中的背景图等设置

.photo {
  background: url(photo.jpg);
}

3. JavaScript文件中动态添加或者改变的图片引用

var imgTempl = '<img src="photo.jpg" />';
document.body.innerHTML = imgTempl;

4. ReactJS中图片的引用

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  render() {
    return (<img src='photo.jpg' />);
  }
}

ReactDom.render(<App />, document.querySelector('#container'));

url-loader

在 webpack 中引入图片需要依赖 url-loader 这个加载器。

安装:

npm install url-loader --save-dev

当然你可以将其写入配置中,以后与其他工具模块一起安装。

在 webpack.config.js 文件中配置如下:

module: {
loaders: [


{



test: /\.(png|jpg)$/,



loader: 'url-loader?limit=8192'


}

]
}

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

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

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

module: {
loaders: [


{



test: /\.(png|jpg)$/,



loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'


}

]
}

 上例中的 name 字段指定了在打包根目录(output.path)下生成名为 images 的文件夹,并在原图片名前加上8位 hash 值。

例:工程目录如下

webpack踩坑之路图片的路径与打包

在 main.css 中引用了同级 images 文件夹下的 bg.jpg 图片

background-image: url(./images/bg.jpg);

通过之前的配置,使用 $ webpack 命令对代码进行打包后生成如下目录

webpack踩坑之路图片的路径与打包

打包目录中,css 文件和 images 文件夹保持了同样的层级,可以不做任务修改即能访问到图片。区别是打包后的图片加了 hash 值,bundle.css 文件里引入的也是有hash值的图片。

background-image: url(images/f593fbb9.bg.jpg);

(上例中,使用了单独打包css的技术,只是为了方便演示)

publicPath

output.publicPath 表示资源的发布地址,当配置过该属性后,打包文件中所有通过相对路径引用的资源都会被配置的路径所替换。

output: {
path: 'dist',

publicPath: '/assets/',

filename: 'bundle.js'
}

main.css

background-image: url(./images/bg.jpg);

bundle.css

background-image: url(/assets/images/f593fbb9.bg.jpg);

该属性的好处在于当你配置了图片 CDN 的地址,本地开发时引用本地的图片资源,上线打包时就将资源全部指向 CDN 了。

但是要注意,如果没有确定的发布地址不建议配置该属性,否则会让你打包后的资源路径很混乱。

JS中的图片

初用 webpack 进行项目开发的同学会发现:在 js 或者 react 中引用的图片都没有打包进 bundle 文件夹中。

正确写法应该是通过模块化的方式引用图片路径,这样引用的图片就可以成功打包进 bundle 文件夹里了

js

var imgUrl = require('./images/bg.jpg'),
  imgTempl = '<img src="'+imgUrl+'" />';
document.body.innerHTML = imgTempl;

react

render() {
  return (<img src={require('./images/bg.jpg')} />);
}

HTML中的图片

由于 webpack 对 html 的处理不太好,打包 HTML 文件中的图片资源是相对来说最麻烦的。这里需要引用一个插件—— html-withimg-loder

$ npm install html-withimg-loader --save-dev

webpack.config.js 添加配置

module: {
loaders: [


{



test: /\.html$/,



loader: 'html-withimg-loader'


}

]
}

在 bundle.js 中引用 html 文件

import '../index.html';

这样 html 文件中的图片就可以被打包进 bundle 文件夹里了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
php对mongodb的扩展(小试牛刀)
Nov 11 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
Dec 06 Javascript
struts2+jquery组合验证注册用户是否存在
Apr 30 Javascript
js匿名函数的调用示例(形式多种多样)
Aug 20 Javascript
简要了解jQuery移动web开发的响应式布局设计
Dec 04 Javascript
JS判断日期格式是否合法的简单实例
Jul 11 Javascript
如何检测JavaScript的各种类型
Jul 30 Javascript
jquery实现超简单的瀑布流布局【推荐】
Mar 08 Javascript
vue2.0与bootstrap3实现列表分页效果
Nov 28 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
Jan 25 Javascript
解决angularjs WdatePicker ng-model的问题
Sep 13 Javascript
vue中img src 动态加载本地json的图片路径写法
Apr 25 Javascript
js实现鼠标跟随运动效果
Aug 02 #Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
Sep 05 #Javascript
javascript观察者模式实现自动刷新效果
Sep 05 #Javascript
js使用generator函数同步执行ajax任务
Sep 05 #Javascript
vue如何使用 Slot 分发内容实例详解
Sep 05 #Javascript
详解Vue2.0 事件派发与接收
Sep 05 #Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
Sep 05 #Javascript
You might like
PHP读取MySQL数据代码
2008/06/05 PHP
PHP检测接口Traversable用法详解
2017/12/29 PHP
表单验证的完整应用案例探讨
2013/03/29 Javascript
使用jquery+CSS实现控制打印样式
2014/12/31 Javascript
网页中右键功能的实现方法之contextMenu的使用
2017/02/20 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
2017/02/28 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
2017/03/10 Javascript
JavaScript队列函数和异步执行详解
2017/06/19 Javascript
使用NestJS开发Node.js应用的方法
2018/12/03 Javascript
vue项目中mock.js的使用及基本用法
2019/05/22 Javascript
VUE 解决mode为history页面为空白的问题
2019/11/01 Javascript
JavaScript中变量提升机制示例详解
2019/12/27 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
2020/04/14 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
2020/07/20 Javascript
[49:21]TNC vs VG 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第三场 8.20.mp4
2019/08/22 DOTA
Python  连接字符串(join %)
2008/09/06 Python
python 生成不重复的随机数的代码
2011/05/15 Python
为python设置socket代理的方法
2015/01/14 Python
Python原始字符串与Unicode字符串操作符用法实例分析
2017/07/22 Python
python中logging包的使用总结
2018/02/28 Python
详解Python数据可视化编程 - 词云生成并保存(jieba+WordCloud)
2019/03/26 Python
python中的print()输出
2019/04/12 Python
python IDLE 背景以及字体大小的修改方法
2019/07/12 Python
Django中URL的参数传递的实现
2019/08/04 Python
谈一谈数组拼接tf.concat()和np.concatenate()的区别
2020/02/07 Python
对django 2.x版本中models.ForeignKey()外键说明介绍
2020/03/30 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
全球游戏Keys和卡片市场:GamesDeal
2018/03/28 全球购物
信访工作经验交流材料
2014/05/23 职场文书
商铺门前三包责任书
2014/07/25 职场文书
法人委托书的范本格式
2014/09/11 职场文书
2014教师“四风问题”对照检查材料思想汇报
2014/09/16 职场文书
2014县委书记党的群众路线教育实践活动对照检查材料思想汇报
2014/09/22 职场文书
2014年银行柜员工作总结
2014/11/12 职场文书
nginx里的rewrite跳转的实现
2021/03/31 Servers
《群青的幻想曲》京力秋树角色PV公开
2022/04/08 日漫