Webpack打包图片路径配置与常见问题解决

Webpack图片打包场景分析

初次接触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配置详解

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字符串形式内联引用。

除limit外，url-loader还可通过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路径配置

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与HTML图片引用处理

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-loader插件。

$ 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文件夹中。

本文内容至此结束，希望对各位的学习有所帮助，欢迎继续支持本站。