转自:http://www.cnblogs.com/ghost-xyx/p/5812902.html

刚开始用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踩坑之路——图片的路径与打包的更多相关文章

  1. webpack踩坑之路——构建基本的React+ES6项目

    转自:http://www.cnblogs.com/ghost-xyx/p/5483464.html webpack是最近比较火的构建工具,搭配上同样比较火的ReacJS与ES6(ES2015)一定是 ...

  2. webpack图片的路径与打包

    转的http://www.cnblogs.com/ghost-xyx/p/5812902.html 今天写 react遇到打包图片,之前都是通过url在css里,没遇到问题,今天在 react里直接用 ...

  3. vue+ vue-router + webpack 踩坑之旅

    说是踩坑之旅 其实是最近在思考一些问题 然后想实现方案的时候,就慢慢的查到这些方案   老司机可以忽略下面的内容了 1)起因  考虑到数据分离的问题  因为server是express搭的   自然少 ...

  4. 开始更新webpack踩坑笔记

    今天开始学习webpack,记录下踩过的坑-zxf

  5. Mahout踩坑之路

    一.版本对比 公司版Mahout 由于Mahout只能允许于hadoop0.20以上版本上,而百度的hadoop是hadoop0.19的一个分支.因此百度HPC组曾经将Mahout移植到百度的hado ...

  6. 踩坑之路_&quot;var name = &#39; &#39;;&quot;_迷之BUG

    情景介绍:最近写一个拖拽生成图表的工具,自己的思路每次mousedown的时候动态将this的name属性值赋值给全局中变量(自己手贱测试时直接将变量名命名为了'name',一大波bug还有30s到达 ...

  7. Spring Boot踩坑之路一

    Takes an opinionated view of building production-ready Spring applications. Spring Boot favors conve ...

  8. 后端路由项目由 gulp 改为 webpack 的踩坑实录

    前言 公司有个后端路由的项目是用 gulp 作为前端自动化构建工具,最近学习了一下 webpack,深感其强大,一狠心将其改成了 webpack 构建,以下是踩坑实录. gulp 先来说说原来的架构. ...

  9. webpack入坑之旅(五)加载vue单文件组件

    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...

随机推荐

  1. webgl动画小测试

    // MultiPoint.js (c) 2012 matsuda // Vertex shader program var VSHADER_SOURCE = 'attribute vec4 a_Po ...

  2. tomcat启动的了,但是加载项目失败

    解决方法: 1.tomcat启动是好的,也有可能找不到tomcat的dll,所以,检查一下myeclipse所使用的tomcat的解压目录是不是有空格,有空格的话,重新解压到一个新目录,千万不要有空格 ...

  3. python实现的视频下载工具you-get,支持多个国内外主流视频平台

    RT,you-get 是一个视频离线下载工具, https://github.com/soimort/you-get 另一个同类工具 youtube-dl 也是python 实现,虽然名为 youtu ...

  4. 跟我一起云计算(3)——hbase

    hbase HBase是一个分布式的.面向列的开源数据库,该技术来源于 Fay Chang 所撰写的Google论文“Bigtable:一个结构化数据的分布式存储系统”.就像Bigtable利用了Go ...

  5. Python将Excel生成SHP

    #!/usr/bin/env python # -*- coding: utf-8 -*- import gdal import xlrd import shapefile # open the ex ...

  6. 使用 Eclipse 调试 Java 程序的技巧

    你应该看过一些如<关于调试的N件事>这类很流行的帖子 .假设我每天花费1小时在调试我的应用程序上的话,那累积起来的话也是很大量的时间.由于这个原因,用这些时间来重视并了解所有使我们调试更方 ...

  7. JVM执行Java程序时内存的划分

    Java虚拟机在执行Java程序过程中会把它所管理的内存区域划分为若干个不同的数据区域. Java虚拟机所管理的内存包括以下几个运行时区域: 1.程序计数器(Program Couter Regist ...

  8. OC语言前期准备

    OC语言前期准备 一.OC简介 Oc语言在c语言的基础上,增加了一层最小的面向对象语法,完全兼容C语言,在OC代码中,可以混用c,甚至是c++代码. 可以使用OC开发mac osx平台和ios平台的应 ...

  9. 通过imeMode禁用键盘只能输入数字

    var obj = document.getElementById('y'); var arr = [48,49,50,51,52,53,54,55,56,57];//数字对应的键码 obj.onke ...

  10. ARM 嵌入式中断

    1. SATA中断要打开,挂在fiq上(通过cpu中断的fiq中断enable位,对sata中断使能), 2.外设及GPIO中断打开,挂在irq上(通过cpu中断的irq 的enable位对其使能), ...