默認情況下， webpack 無法處理 css 文件中的 url 地址，不管是圖片還是 字體庫， 只要是 URL 地址，都處理不了，所以我們要使用 url-loader進行處理圖片的url地址

安裝 cnpm i url-loader file-loader -D

webpack.config.js文件

var path = require('path') var htmlWebpackPlugin = require('html-webpack-plugin')const webpack = require('webpack');module.exports = {entry: path.join(__dirname, './src/main.js'),output: { path: path.join(__dirname, './dist'), filename: 'bundle.js' },devServer: { open: true, port: 3000, contentBase: 'src', hot: true },plugins: [ /new webpack.HotModuleReplacementPlugin(),new htmlWebpackPlugin({template: path.join(__dirname, './src/index.html'), filename: 'index.html' })],module: { rules: [ // 第三方模塊的匹配規則{ test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 配置處理 .css 文件的 第三方 loader 規則{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, // 配置 處理 .less 文件的第三方 loader 規則{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },// { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader'} // 不傳參 圖片將 轉為 base64 格式的字符串{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7701460&name=[hash:8]-[name].[ext]'}]} }

loader處理 圖片路徑

• limit參數：給定的值，是圖片的大小，單位是 byte, 如果我們引用的圖片，大于或等于給定的 limit 值，則不會轉為 base64 格式的字符串，如果 圖片小于給定的 limit 值，則會被轉為 base64的字符串
• name參數：使圖片使用圖片自定義的名稱， [hash:10] 為hash 碼截取前10位，最大位數可以填32位，因為生成的hash碼只有32位。

注意：

• 當使用url-loader 不添加任何參數時，默認圖片將轉為 base64 格式的字符串。
• 在使用name參數時，如果兩個圖片的名字相同內容不同的照片同時調用，后加載的圖片會先覆蓋先加載的圖片，通過加上[hash:10] 來區分兩張圖片，防止圖片覆蓋。

總結

以上是生活随笔為你收集整理的Node.js webpack中url-loader处理图片路径的全部內容，希望文章能夠幫你解決所遇到的問題。

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