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

在 webpack 中引入图片需要依赖 url-loader 这个加载器。

1. 安装：

   npm install url-loader --save-dev

2. 在 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 值。

3. 应用
   (1)在样式文件中的图片
   通过url-loader 可以解决样式文件中的背景图片问题。即：第二种情况可以解决。
   (2)在js和react中的图片
   方法一：使用require模块化的方式引用图片路径

   var imgUrl = require('./images/bg.jpg'),
       imgTempl = '<img src="'+imgUrl+'" />';
   document.body.innerHTML = imgTempl;

   render() {
       return (<img src={require('./images/bg.jpg')} />);
   }

   方法二：

   import icon1 from '../images/icon1.png';
   <img src={logoCon} />

   (3)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 文件夹里了。