Node.js webpack中url-loader处理图片路径
生活随笔
收集整理的這篇文章主要介紹了
Node.js webpack中url-loader处理图片路径
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
默認(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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Node.js html-webpack
- 下一篇: Node.js webpack中导入vu