1. HTML文件中img標(biāo)簽的src屬性引用或者內(nèi)嵌樣式引用

<img src="photo.jpg" /> <div style="background:url(photo.jpg)"></div>

2. CSS文件中的背景圖等設(shè)置

.photo {

background: url(photo.jpg);

}

3. JavaScript文件中動(dòng)態(tài)添加或者改變的圖片引用

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 等，以豎線隔開(kāi)即開(kāi)。

loader 后面 limit 字段代表圖片打包限制，這個(gè)限制并不是說(shuō)超過(guò)了就不能打包，而是指當(dāng)圖片大小小于限制時(shí)會(huì)自動(dòng)轉(zhuǎn)成 base64 碼引用。上例中大于10000字節(jié)的圖片正常打包，小于10000字節(jié)的圖片以 base64 的方式引用。

url-loader 后面除了 limit 字段，還可以通過(guò) name 字段來(lái)指定圖片打包的目錄與文件名：

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

publicPath

output.publicPath 表示資源的發(fā)布地址，當(dāng)配置過(guò)該屬性后，打包文件中所有通過(guò)相對(duì)路徑引用的資源都會(huì)被配置的路徑所替換。

output: {path: 'dist',publicPath: '/assets/',filename: 'bundle.js' }main.cssbackground-image: url(./images/bg.jpg);bundle.css

background-image: url(/assets/images/f593fbb9.bg.jpg);
該屬性的好處在于當(dāng)你配置了圖片 CDN 的地址，本地開(kāi)發(fā)時(shí)引用本地的圖片資源，上線打包時(shí)就將資源全部指向 CDN 了。
需要注意的是，在配置路徑時(shí)，html和css的路徑必須在一個(gè)層級(jí)上，否則css里面引用的圖片路徑會(huì)出錯(cuò)。

JS中的圖片

初用 webpack 進(jìn)行項(xiàng)目開(kāi)發(fā)的同學(xué)會(huì)發(fā)現(xiàn)：在 js 或者 react 中引用的圖片都沒(méi)有打包進(jìn) bundle 文件夾中。

正確寫(xiě)法應(yīng)該是通過(guò)模塊化的方式引用圖片路徑，這樣引用的圖片就可以成功打包進(jìn) bundle 文件夾里了

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

HTML中的圖片

由于 webpack 對(duì) html 的處理，需要引用一個(gè)插件—— 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 文件中的圖片就可以被打包進(jìn) bundle 文件夾里了。

總結(jié)

以上是生活随笔為你收集整理的webpack 图片的路径与打包的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。