默認(rèn)情況下， webpack 無法處理 css 文件中的 url 地址，不管是圖片還是 字體庫， 只要是 URL 地址，都處理不了，所以我們要使用 url-loader進(jìn)行處理圖片的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: [ // 第三方模塊的匹配規(guī)則{ test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 配置處理 .css 文件的 第三方 loader 規(guī)則{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, // 配置 處理 .less 文件的第三方 loader 規(guī)則{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },// { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader'} // 不傳參 圖片將 轉(zhuǎn)為 base64 格式的字符串{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7701460&name=[hash:8]-[name].[ext]'}]} }

loader處理 圖片路徑

• limit參數(shù)：給定的值，是圖片的大小，單位是 byte, 如果我們引用的圖片，大于或等于給定的 limit 值，則不會(huì)轉(zhuǎn)為 base64 格式的字符串，如果 圖片小于給定的 limit 值，則會(huì)被轉(zhuǎn)為 base64的字符串
• name參數(shù)：使圖片使用圖片自定義的名稱， [hash:10] 為hash 碼截取前10位，最大位數(shù)可以填32位，因?yàn)樯傻膆ash碼只有32位。

注意：

• 當(dāng)使用url-loader 不添加任何參數(shù)時(shí)，默認(rèn)圖片將轉(zhuǎn)為 base64 格式的字符串。
• 在使用name參數(shù)時(shí)，如果兩個(gè)圖片的名字相同內(nèi)容不同的照片同時(shí)調(diào)用，后加載的圖片會(huì)先覆蓋先加載的圖片，通過加上[hash:10] 來區(qū)分兩張圖片，防止圖片覆蓋。

總結(jié)

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

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