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通过class来获取元素实现代码
Feb 20 Javascript
js jquery获取随机生成id的服务器控件的三种方法
Jul 11 Javascript
jQuery获取选中内容及设置元素属性的方法
Jul 09 Javascript
微信小程序 Tab页切换更新数据
Jan 05 Javascript
Vue实现百度下拉提示搜索功能
Jun 21 Javascript
微信小程序按钮去除边框线分享页面功能
Aug 27 Javascript
Angularjs之ngModel中的值验证绑定方法
Sep 13 Javascript
实例讲解v-if和v-show的区别
Jan 31 Javascript
开发Node CLI构建微信小程序脚手架的示例
Mar 27 Javascript
为react组件库添加typescript类型提示的方法
Jun 15 Javascript
javascript实现移动端触屏拖拽功能
Jul 29 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 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程序?
2006/12/08 PHP
浅谈PHP的反射API
2017/02/26 PHP
PHP实现简单的协程任务调度demo示例
2020/02/01 PHP
在textarea中屏蔽js的某个function的javascript代码
2007/04/20 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
2011/09/26 Javascript
js函数排序的实例代码
2013/07/01 Javascript
前端开发过程中浏览器版本的两种判定方法
2013/10/30 Javascript
常用的JavaScript验证正则表达式汇总
2013/11/26 Javascript
javascript在子页面中函数无法调试问题解决方法
2014/01/17 Javascript
JS组件Bootstrap Table使用方法详解
2016/02/02 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
2016/03/08 Javascript
快速实现jQuery多级菜单效果
2017/02/01 Javascript
jQuery元素选择器实例代码
2017/02/06 Javascript
BootStrap TreeView使用实例详解
2017/11/01 Javascript
angular写一个列表的选择全选交互组件的示例
2018/01/22 Javascript
使用layer弹窗和layui表单实现新增功能
2018/08/09 Javascript
深入理解Vue router的部分高级用法
2018/08/15 Javascript
环形加载进度条封装(Vue插件版和原生js版)
2019/12/04 Javascript
Python高效编程技巧
2013/01/07 Python
Python selenium如何设置等待时间
2016/09/15 Python
Python解决八皇后问题示例
2018/04/22 Python
django的登录注册系统的示例代码
2018/05/14 Python
Python中一些不为人知的基础技巧总结
2018/05/19 Python
python中使用ctypes调用so传参设置遇到的问题及解决方法
2019/06/19 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
在HTML5 canvas里用卷积核进行图像处理的方法
2018/05/02 HTML / CSS
中国跨境海淘网站:考拉海购
2016/08/01 全球购物
APM Monaco中国官网:来自摩纳哥珠宝品牌
2017/12/27 全球购物
银河香水:Galaxy Perfume
2019/03/25 全球购物
外科实习自我鉴定
2013/10/06 职场文书
网上书店创业计划书
2014/01/12 职场文书
施工安全责任书
2014/04/14 职场文书
领导个人查摆剖析材料
2014/10/29 职场文书
晚会开场白和结束语
2015/05/29 职场文书
残联2016年全国助残日活动总结
2016/04/01 职场文书
基于Golang 高并发问题的解决方案
2021/05/08 Golang