webpack图片的路径与打包
转的http://www.cnblogs.com/ghost-xyx/p/5812902.html
今天写 react遇到打包图片,之前都是通过url在css里,没遇到问题,今天在 react里直接用就错了,所以记录下来,这篇文章帮我解决了。。。
刚开始用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 值。
例:工程目录如下
在 main.css 中引用了同级 images 文件夹下的 bg.jpg 图片
background-image: url(./images/bg.jpg);
通过之前的配置,使用 $ 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 文件夹里了。
感谢您的浏览,希望能有所帮助
webpack图片的路径与打包的更多相关文章
- webpack踩坑之路——图片的路径与打包
转自:http://www.cnblogs.com/ghost-xyx/p/5812902.html 刚开始用webpack的同学很容易掉进图片打包这个坑里,比如打包出来的图片地址不对或者有的图片并不 ...
- webpack踩坑之路 (2)——图片的路径与打包
刚开始用webpack的同学很容易掉进图片打包这个坑里,比如打包出来的图片地址不对或者有的图片并不能打包进我们的目标文件夹里(bundle).下面我们就来分析下在webpack项目中图片的应用场景. ...
- extract-text-webpack-plugin打包css后出现图片引用路径不对问题
在做项目过程中,发现引用了图片的less文件被extract-text-webpack-plugin打包过之后,里面的图片引用路径指向到了extract-text-webpack-plugin打包目录 ...
- vue-cil和webpack中本地静态图片的路径问题解决方案
1 本地图片动态绑定img的src属性 一般我们在html中或者vue组件文件中引用图片是这样,这是不需要做特别处理的 我们将图片放入assets中或者重新建立个文件夹img什么的都可以,随意- 但是 ...
- webpack 图片没打包成功
webpack 图片打包: 直接src引用的 src='../../logo.png,webpack不会进行打包 作为背景图片的,打包成功了 解决(react 写法): 1.import 方法(推荐) ...
- webpack中,css中打包背景图,路径报错
css-loader: //打包样式中背景图 { test: /\.(png|jpg)$/, loader: "url-loader?limit=8192&name=images/[ ...
- vue-cil 和 webpack 中本地静态图片的路径问题解决方案
1.小于8K的图片将直接以base64的形式内联在代码中,可以减少一次http请求. 2.大于8k的呢?则直接file-loader打包, 这里并没有写明file-loader.但是确实是需要安装,否 ...
- webpack快速入门——CSS文件打包
1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ background:pink; color:yellowgreen; } 2.css建立好后,需要引 ...
- vue本地静态图片的路径问题解决方案
不少人在vue的开发中遇到这样一个问题: img的src属性绑定url变量,然而图片加载失败. 大部分的情况中,是开发者使用了错误的写法,例如: <img src="{{ imgUrl ...
随机推荐
- angularJS常用命令
首先使用命令行进入你要编辑的web项目目录下: (一)编译浏览项目 1:grunt build 对web项目编译: 2:grunt server 装载(在浏览器上查看页面): 3:ctrl ...
- CentOS6.4x64安装mysql5.6.23(rpm)
#查看已安装的的mysql shell>rpm -qa|grep -i mysql #根据上条命令的结果卸载mysql shell>rpm -e -nodeps mysql* #下载mys ...
- 动态加载JS过程中如何判断JS加载完成
在正常的加载过程中,js文件的加载是同步的,也就是说在js加载的过程中,浏览器会阻塞接下来的内容的解析.这时候,动态加载便显得尤为重要了,由于它是异步加载,因此,它可以在后台自动下载,并不会妨碍其它内 ...
- Linux命令之xargs的分析及隐患
写一个main.c: #include <stdio.h> int main(){ printf("foo"); printf("bar"); re ...
- MotionEvent的getX(),getY()与getRawX(),getRawY()区别
getX()是表示Widget相对于自身左上角的x坐标,而getRawX()是表示相对于屏幕左上角的x坐标值(注意:这个屏幕左上角是手机屏幕左上角,不管activity是否有titleBar或是否全屏 ...
- PhpEclipse插件
PHP开发工具 PHPEclipse PHPEclipse 是一个相当强大的一个Eclipse下开发PHP的插件,包括的功能有:PHP语法分析,调试,代码格式化,大纲视图,代码模板定制等. 安装地址: ...
- (转)Java 的swing.GroupLayout布局管理器的使用方法和实例
摘自http://www.cnblogs.com/lionden/archive/2012/12/11/grouplayout.html (转)Java 的swing.GroupLayout布局管理器 ...
- IT人士的职业规范——凝视
这两天将系统敲完了,该总体调试了,调试的过程中,发现了一个非常大的问题,就是自己的凝视写的不够,有时候不明确U层这个事件是做什么的,有时候不知道这个事件传递的是什么參数,有时候不知道相应的B层和 ...
- Java凝视Annotation
Java凝视Annotation 从JDK 5開始,Java添加了对元数据(MetaData)的支持,也就是Annotation(凝视).Annotation提供了一种为程序元素设置元数据的方法 ...
- react-native 环境配置及hello world
一.前言 最近手头的工作繁多,有研究性的项目和系统研发,正好遇到同事离职,接手了框架的UI组件,不仅需要维护和填坑,还需要开发新的功能组件.因为身在H5-Hybird的框架部门,最近团队开始尝试使用R ...