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;

url-loader

在 webpack.config.js 文件中配置以下：

module: {
　　loaders: [
　　　　{
                test: /\.(png|jpg|gif)$/,
                loader: 'url-loader?limit=10000&name=static/images/moduleName/[name].[ext]?[hash:12]'
            }
　　]
}

test 屬性表明能夠匹配的圖片類型，除了 png、jpg 以外也能夠添加 gif 等，以豎線隔開即開。

loader 後面 limit 字段表明圖片打包限制，這個限制並非說超過了就不能打包，而是指當圖片大小小於限制時會自動轉成 base64 碼引用。上例中大於10000字節的圖片正常打包，小於10000字節的圖片以 base64 的方式引用。

url-loader 後面除了 limit 字段，還能夠經過 name 字段來指定圖片打包的目錄與文件名：

上例中的 name 字段指定了在打包根目錄（output.path）下生成路徑爲static/images/moduleName/的文件夾，並在原圖片名前加上12位 hash 值。

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 了。
須要注意的是，在配置路徑時，html和css的路徑必須在一個層級上，不然css裏面引用的圖片路徑會出錯。

JS中的圖片

初用 webpack 進行項目開發的同窗會發現：在 js 或者 react 中引用的圖片都沒有打包進 bundle 文件夾中。

正確寫法應該是經過模塊化的方式引用圖片路徑，這樣引用的圖片就能夠成功打包進 bundle 文件夾裏了

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-withimg-loader

$ npm install html-withimg-loader --save-dev

---

module: {
　　loaders: [
　　　 {
                test: /\.(htm|html)$/i,
                loader: 'html-withimg-loader'
            }
　　]
}

在 bundle.js 中引用 html 文件

import '../index.html';這樣 html 文件中的圖片就能夠被打包進 bundle 文件夾裏了。