Node.js webpack中url-loader处理图片路径

默认情况下， 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处理图片路径相关推荐

Node.js webpack中导入vue的三种方法
在webpack 中使用 Vue: 安装 vue 模块 npm i vue -S 注意: 在 webpack 中, 使用 import Vue from 'vue' 导入的 Vue 构造函数,功能不完 ...
在 Node.js 应用中集成 Redis
Node.js 在搭建快速轻量型的 HTTP 服务或 Web 应用有其独特的优势:快速而又友好的开发,单线程消息驱动带来的高并发高吞吐.随着 HTTP 服务或者 Web 应用访问量的加大,传统数据库的 ...
详解Node.js开发中不可或缺的7个库
在Node.js开发中,选择合适的库对于提高开发效率和优化应用程序性能至关重要.本文将介绍七个备受关注的Node.js库,它们在各自的领域中展现了出色的功能和性能.这些库分别是:Config.Fetc ...
webpack中的 loader
文章目录 1. loader 概述 2. loader 的调用过程 3. 打包处理 css 文件 4. loader 调用过程图解 5. 打包处理 less 文件 6. 打包处理样式表中与 url 路 ...
深度解读Webpack中的loader原理
一.前言 webpack 是一个现代 JavaScript 应用的静态模块打包器.那么 webpack 是怎样实现不同种类资源模块加载的呢? 没错就是通过 loader.loader 用于对模块的源代 ...
Node.js之HTPP URL
几乎每门编程语言都会包括网络这块,Node.js也不例外.今天主要是熟悉下Node.js中HTTP服务.其实HTTP模块是相当低层次的,它不提供路由.cookie.缓存等,像Web开发中不会直接使用, ...
Node.js webpack 打包的入口与出口
webpack 的 4.x 版本中默认约定: 打包的入口文件为 src -> index.js 打包的输出文件为 dist -> main.js 可以自定义: const path = r ...
webpack中的loader
webpack核心概念 Entry:入口,Webpack 执行构建的第一步将从 Entry 开始,可抽象成输入. Module:模块,在 Webpack 里一切皆模块,一个模块对应着一个文件.Webp ...
彻底弄懂Webpack中的Loader机制
一.前言面对这些框架所衍生出来的文件,现代的模块打包工具,例如 Webpack 本身只能处理 js 和 JSON 文件,其他类型文件它是不能够处理的.需要借助 Loader 来处理这些类型的文件, ...

Node.js webpack中url-loader处理图片路径

webpack.config.js文件

Node.js webpack中url-loader处理图片路径相关推荐

最新文章

热门文章