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模版引擎-tmpl的bug修复与性能优化分析
Oct 23 Javascript
jQuery代码优化之基本事件
Nov 01 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
Dec 28 Javascript
重构Javascript代码示例(重构前后对比)
Jan 23 Javascript
JavaScript 对象深入学习总结(经典)
Sep 29 Javascript
JS实现三个层重叠点击互相切换的方法
Oct 06 Javascript
canvas实现图像截取功能
Feb 06 Javascript
ES6学习之变量的两种命名方法示例
Jul 18 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
Feb 16 Javascript
关于ES6箭头函数中的this问题
Feb 27 Javascript
vue导出html、word和pdf的实现代码
Jul 31 Javascript
如何基于js判断浏览器版本
Feb 20 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
在项目中寻找代码的坏命名
2012/07/14 PHP
php判断当前用户已在别处登录的方法
2015/01/06 PHP
laravel 5 实现模板主题功能(续)
2015/03/02 PHP
Laravel 5框架学习之向视图传送数据(进阶篇)
2015/04/08 PHP
PHP回调函数概念与用法实例分析
2017/11/03 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
php让json_encode不自动转义斜杠“/”的方法
2020/04/27 PHP
JavaScript TO HTML 转换
2006/06/26 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
2013/03/21 Javascript
JS图片切换的具体方法(带缩略图版)
2013/11/12 Javascript
js实现键盘Enter键提交表单的方法
2015/05/27 Javascript
JS实现窗口加载时模拟鼠标移动的方法
2015/06/03 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
2016/10/17 Javascript
Vue.js实现简单ToDoList 前期准备(一)
2016/12/01 Javascript
JavaScript实现购物车基本功能
2017/07/21 Javascript
实例详解BootStrap的动态模态框及静态模态框
2018/08/13 Javascript
详解vue移动端项目的适配(以mint-ui为例)
2018/08/17 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
jquery中为什么能用$操作
2019/06/18 jQuery
JavaScript中的this/call/apply/bind的使用及区别
2020/03/06 Javascript
linux系统使用python监测系统负载脚本分享
2014/01/15 Python
使用Python实现简单的服务器功能
2017/08/25 Python
有关Python的22个编程技巧
2018/08/29 Python
对python xlrd读取datetime类型数据的方法详解
2018/12/26 Python
一文了解Python并发编程的工程实现方法
2019/05/31 Python
如何通过python画loss曲线的方法
2019/06/26 Python
Python数据可视化实现正态分布(高斯分布)
2019/08/21 Python
python实现输出一个序列的所有子序列示例
2019/11/18 Python
Python中BeautifulSoup通过查找Id获取元素信息
2020/12/07 Python
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
2013/02/04 HTML / CSS
初中生自我评价
2014/02/01 职场文书
医院总经理岗位职责
2014/02/04 职场文书
工作迟到检讨书
2014/02/21 职场文书
大学生就业意向书范文
2014/04/01 职场文书
大学生操行评语大全
2014/12/31 职场文书
2015年领导班子工作总结
2015/05/23 职场文书