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 相关文章推荐
Javascript 网页黑白效果实现代码(兼容IE/FF等)
Apr 23 Javascript
IE6下js通过css隐藏select的一个bug
Aug 16 Javascript
javascript基础之查找元素的详细介绍(访问节点)
Jul 05 Javascript
Jquery实现仿腾讯微博发表广播
Nov 17 Javascript
表单验证正则表达式实例代码详解
Nov 09 Javascript
js实现内容显示并使用json传输数据
Mar 16 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
Vue from-validate 表单验证的示例代码
Sep 26 Javascript
浅谈JsonObject中的key-value数据解析排序问题
Dec 06 Javascript
在vue项目中引入highcharts图表的方法(详解)
Mar 05 Javascript
JS实现马赛克图片效果完整示例
Apr 13 Javascript
JS中超越现实的匿名函数用法实例分析
Jun 21 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在字符断点处截断文字的实现代码
2011/04/21 PHP
php 阴历-农历-转换类代码
2012/01/16 PHP
ThinkPHP模板IF标签用法详解
2014/07/01 PHP
php数组查找函数总结
2014/11/18 PHP
Smarty分页实现方法完整实例
2016/05/11 PHP
PHP环境搭建的详细步骤
2016/06/30 PHP
php的api数据接口书写实例(推荐)
2016/09/22 PHP
PHP仿微信发红包领红包效果
2016/10/30 PHP
js 获取中文拼音,Select自动匹配字母获取值的代码
2009/09/23 Javascript
javascript 同时在IE和FireFox获取KeyCode的代码
2010/02/07 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
2013/06/14 Javascript
禁止页面刷新让F5快捷键及右键都无效
2014/01/22 Javascript
javascript中call apply 的应用场景
2015/04/16 Javascript
js正则匹配出所有图片及图片地址src的方法
2015/06/08 Javascript
整理JavaScript创建对象的八种方法
2015/11/03 Javascript
基于jQuery Ajax实现上传文件
2016/03/24 Javascript
深入理解jQuery3.0的domManip函数
2016/09/01 Javascript
angularJs的ng-class切换class
2017/06/23 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
2017/08/04 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
2018/08/12 Javascript
微信小程序 JS动态修改样式的实现方法
2018/12/16 Javascript
初学python数组的处理代码
2011/01/04 Python
简单解析Django框架中的表单验证
2015/07/17 Python
python求解数组中两个字符串的最小距离
2018/09/27 Python
浅谈python在提示符下使用open打开文件失败的原因及解决方法
2018/11/30 Python
通过python爬虫赚钱的方法
2019/01/29 Python
java关于string最常出现的面试题整理
2021/01/18 Python
法学专业个人求职信
2013/09/26 职场文书
服装机修工岗位职责
2013/12/26 职场文书
经典毕业生求职信
2014/07/12 职场文书
我的中国梦演讲稿600字
2014/08/19 职场文书
2014县政府领导班子对照检查材料思想汇报
2014/09/25 职场文书
语文复习计划
2015/01/19 职场文书
教师党员自我评价范文
2015/03/04 职场文书
使用Springboot实现健身房管理系统
2021/07/01 Java/Android
js作用域及作用域链工作引擎
2022/07/07 Javascript