webpack踩坑之路 (2)——圖片的路徑與打包

剛開始用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 文件夾裏了。

 

感謝您的瀏覽，但願能有所幫助