構建新環(huán)境的時候，偶然發(fā)現(xiàn) Openlayers 使用 require 的方式加載圖片（Icon）報錯，開始以為是 Openlayers 版本問題，后來經(jīng)過嘗試，

發(fā)現(xiàn)是 webpack 配置問題：在 Webpack5 環(huán)境下，使用了 Webpack4 的配置方式。

本文包括 環(huán)境版本、Openlayers 使用 require 問題、Webpack5 正確配置三部分。

---

環(huán)境版本

node 版本：v16.16.0

npm 版本：8.17.0

webpack 版本：5.74.0

Openlayers 版本：7.2.2

谷歌版本：109.0.5414.75

---

Openlayers 使用 require 問題

本文嘗試了三個主要版本：7.2.2、6.15.1、5.3.3，錯誤原因一致，但是提示略有不同。

1. 使用 require 加載圖片代碼：

const iconStyle = new Style({image: new Icon({anchor: [0.5, 46],anchorXUnits: 'fraction',anchorYUnits: 'pixels',src: require('./assets/image/cluster/mark_red.png')}),
});

2. 錯誤信息

7.2.2 版本 雖然報錯，但是提示不明確，大概意思是 src 不能為空。

6.15.1 版本 給出了明確的錯誤原因，可以 查看錯誤詳情。

5.3.3 版本 給出了錯誤網(wǎng)址，但是無法訪問。

3. 通過代碼解決問題

通過 console 輸出查看，發(fā)現(xiàn) require 為對象，并不是 base64 字符。因此，只要獲取 base64 即可。

const iconStyle = new Style({image: new Icon({anchor: [0.5, 46],anchorXUnits: 'fraction',anchorYUnits: 'pixels',src: require('./assets/image/cluster/mark_red.png').default}),
});

---

Webpack5 正確配置

1. 在 Webpack5 環(huán)境下使用 Webpack4 的配置

{test: /\.(png)|(jpg)|(gif)|(woff)|(svg)|(eot)|(ttf)$/,// test: /\.(png)|(jpg)|(gif)|(woff)|(eot)|(ttf)$/,use: [{loader: "url-loader",options: {limit: 50000,   //小于50K的 都打包name: "[hash:8].[name].[ext]",publicPath: "layui-src/img/",	//替換CSS引用的圖片路徑 可以替換成愛拍云上的路徑outputPath: "layui-src/img/"		//生成之后存放的路徑}}]
}

通過查看 require 輸出，可以得知 require 獲得的是 module 對象，需要獲取 default 的 base64 字符才能正常使用。

2. Webpack5 環(huán)境下使用 Webpack5 的配置

{test: /\.(jpe?g|png|svg|gif)/i,type: 'asset',generator: {filename: 'img/[hash][ext][query]' // 局部指定輸出位置},parser: {dataUrlCondition: {maxSize: 8 * 1024 // 限制于 8kb}}
}

通過查看 require 輸出，可以得知 require 獲得到的就是 base64 字符，直接使用即可。

---

參考博客：

webpack5 的使用（四）：加載資源文件
Webpack 5 - Asset Modules
【記錄1】Vue+OpenLayers 圖片標注不顯示問題