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.cssbackground-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; reactrender() {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 文件夾里了。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。