webpack学习-加载图片，加载 SVG，使用 svg-inline-loader加载 Source Map优化 优化 loader 配置优化 resolve.modules 配置

最新推荐文章于 2024-06-22 09:40:49 发布
最新推荐文章于 2024-06-22 09:40:49 发布
阅读量582 收藏
点赞数
分类专栏： 前端八股文 文章标签： webpack 学习 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43428283/article/details/128324041
版权
本文详细介绍了如何使用 Webpack 加载图片和 SVG，包括 file-loader、url-loader 和 svg-inline-loader 的使用方法，以及如何通过 raw-loader 和 svg-inline-loader 处理 SVG。此外，文章还探讨了 Source Map 的选择和加载现有 Source Map 的技巧。在优化方面，文章讨论了 devtool 的选择、缩小文件搜索范围、优化 loader 配置、模块热替换等，旨在提升开发效率和输出质量。
摘要由CSDN通过智能技术生成

3-19 加载图片

在网页中不可避免的会依赖图片资源，例如 PNG、JPG、GIF，下面来教你如何用 Webpack 加载图片资源。

使用 file-loader
file-loader 可以把 JavaScript 和 CSS 中导入图片的语句替换成正确的地址，并同时把文件输出到对应的位置。

例如 CSS 源码是这样写的：

#app {
   
  background-image: url(./imgs/a.png);
}

被 file-loader 转换后输出的 CSS 会变成这样：

#app {
   
  background-image: url(5556e1251a78c5afda9ee7dd06ad109b.png);
}

并且在输出目录 dist 中也多出 ./imgs/a.png 对应的图片文件 5556e1251a78c5afda9ee7dd06ad109b.p

了解本专栏 订阅专栏 解锁全文 超级会员免费看
学习记录wanxiaowan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
svg-inline-loader：具有清理功能的嵌入式SVG加载器
02-20
！ 不再维护！ 该模块已弃用，将不再维护。 在大多数情况下，您可以改为使用和来替换功能： webpack.config.js const ImageMinimizerPlugin = require ( 'image-minimizer-webpack-plugin' ) ; module . exports = { module : { rules : [ { test : / \. svg $ / , use : [ { loader : "raw-loader" } ] } , ] , } , plugins : [ new ImageMinimizerPlugin ( { minimizerO
【javascript】webpack 加载svg
Riptide
04-13 3519
标签（空格分隔）： webpack 如何在我们的项目中加载svg矢量图？ 使用file-loader 比如像sketch等工具能够导出svg文件，我们可以在css中的background-image属性引用一个svg矢量图为你教案，也可以在html标签img中使用src源引入。 像这样： .path-svg { background-image: url('./svgs...
推荐开源项目：Vue-SVG-Inline-Loader —— 精简SVG集成方案
最新发布
gitblog_00008的博客
06-22 552
推荐开源项目：Vue-SVG-Inline-Loader —— 精简SVG集成方案 项目地址:https://gitcode.com/oliverfindl/vue-svg-inline-loader 在前端开发领域，优化资源加载速度和提高应用性能始终是开发者关注的焦点。针对Vue.js项目，一款名为Vue-SVG-Inline-Loader的开源工具脱颖而出，它提供了一种高效的方法来内联SVG图...
vue-svg-inline-loader：Webpack加载器，用于用Vue项目中的SVG文件的实际内容内联替换SVG图像
02-06
vue-svg-inline-loader 加载器，用于在项目中用SVG文件的实际内容内联替换SVG图像。 加载程序仅解析HTML模板格式。 Loader具有用于SVG优化的内置支持。 Sprite选项仅适用于方法。 Vue CLI 通过创建的项目不是基于构建的，而是使用Vite（基于构建的）。 在这种情况下，此加载程序将无法工作。 请看一下 ，它的工作原理与此加载程序相似。 显着变化 v2.1.0 添加了新选项： v2.0.0 删除了翻译版本 删除了 @ 2依赖性 使用最新的CLI重新创建了所有示例（香草Webpack除外） v1.5.0 添加了新选项： 添加了新选项：
webpack之常用的loader
my_love_download的博客
11-09 675
开发中常用的webpack配置-----loader,在此总结一下各种loader的作用,方便以后使用 raw-loader:主要用于静态资源内联 file-loader:将一个文件移动到一个文件夹中 url-loader:与file-loader类似,区别是在使用url-loader的时候,可以设置一个阀值,当大于阀值的时候就返回它的publicPath,否则返回内联的base64url,这样可以减少小文件的http请求数 ...
webpack使用svg-sprite-loader详解
qq867263657的博客
03-13 5849
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
Webpack实战加载SVG的方法
08-28
本篇文章主要介绍了Webpack实战加载SVG的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
svg-loader:用于webpack的svg（嵌入式和嵌入式）加载程序
05-20
用于webpack的svg加载程序 该加载器是和。 该加载程序允许您以嵌入式或内联方式使用SVG文件。 用法 var url = require ( "svg!./file.svg" ) ; // emits file.svg as file in the output directory and returns the public url // i.e. returns "/public-path/file.svg" var svg = require ( "svg?inline!./file.svg" ) ; // the variable svg now contains the raw contents of file.svg 查询参数将传递给子加载器。 有关详细信息，请参见和的文档。 var url = require ( "svg?name=[name]-[hash]
gatsby-plugin-react-svg:将svg-react-loader添加到gatsby Webpack配置中
05-01
注意：如果配置无效，插件可以从内置的url-loader配置中删除SVG 。 安装 npm install --save gatsby-plugin-react-svg 如何使用 // In your gatsby-config.js plugins: [ { resolve : "gatsby-plugin-react-svg...
elm-asset-webpack-loader:Webpack加载器，用于Elm编程语言中的资产（如图像或字体）
05-12
elm-asset-webpack-loader Webpack加载器，用于Elm编程语言中的资产（如图像或字体） 用法 img [ src " require:src/assets/logo.... 通过这种配置，可以使用其他加载程序（例如svg示例）： { test : / \. svg $ / ,
svg-from-illustrator-loader:用于webpack的加载程序，可轻松使用Illustrator中的SVG
05-18
用于webpack的加载程序，可轻松使用Illustrator中的SVG // React import Example from './Example.svg' export default ( ) => ( ) 安装 npm install svg-from-illustrator-loader 配置 // ... { test : / \. ...
markup-inline-loader:一个webpack加载器，将svgMathML嵌入到html中
05-06
这是什么？ 这是一个webpack加载器。 它可以将SVG或MathML文件内联到HTML，以便您可以将CSS应用于嵌入式svg。 重大变化 v0.2 在以前的版本中， strict选项默认为''”，这意味着它将处理所有svg图片。 但这很容易导致意外的结果，现在我们将其设置为[markup-inline] ： svg[markup-inline], img[markup-inline], math[markup-inline], svg[data-markup-inline], img[data-markup-inline], math[data-markup-inline] 。 与这些选择器不匹配的所有元素都将被忽略。 例子 配置 const rules = [ { test : / \. html $ / , use : 'markup-inline-loa
Webpack插件用于将SVG加载提取到sprite文件中
08-07
Webpack 是一个流行的模块打包工具，它允许开发者将各种资源，如JavaScript、CSS、图片等，进行组织、优化和打包，以便在Web应用中高效地使用。SVG（Scalable Vector Graphics）是一种矢量图形格式，它能提供高质量...
将SVG导入为ReactVue组件的Webpack加载器
08-10
在生产环境中，考虑使用SVGR或类似工具进行优化，例如转换为纯CSS背景图片或 inline SVG。 3. **样式**：在组件中，可以直接应用CSS来改变SVG的颜色、大小等属性，提高复用性。 4. **命名约定**：为了便于管理和维护...
webpack搭建svg环境
weixin_54249422的博客
07-22 212
svg 是矢量图。使用svg画的图片，不会怎么放大，都不失真 1: svg 可以通过 img标签加载 2: svg 可以作为字体图标 3: svg 可以用在大屏可视化上 做各种标记点。 开发实例代码如下 // user.svg <svg verison="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke="#000"> <circl...
Webpack加载器，可让您将SVG文件用作Vue组件
cuk5340的博客
07-26 396
vue-svg-loader (vue-svg-loader) webpack loader that lets you use SVG files as Vue components. webpack加载器，可让您将SVG文件用作Vue组件。 View demo 查看演示 Download Source 下载源 安装 (Installation) npm i -D vue-svg-lo...
推荐使用：SVG-url-loader —— Webpack 中的高效 SVG 加载器
gitblog_00080的博客
05-27 392
推荐使用：SVG-url-loader —— Webpack 中的高效 SVG 加载器 项目地址:https://gitcode.com/bhovhannes/svg-url-loader 在 Web 开发中，SVG 图标因为其小巧、清晰和可缩放的特性，已经成为了界面设计的首选。为了更好地管理和优化 SVG 资源，svg-url-loader 应运而生。它是一个基于 Webpack 的加载器，可以...
vue中使用webpack添加svg以及去除fill
qq_36579455的博客
11-03 3323
前言 vue项目中使用iconfont图标库的时候，如果是直接将iconfont对应的文件下载，然后导入到项目当中，其实对于后续代码的维护以及更新图标是一个比较麻烦的事情，但是如果我们引入图标只需要下载对应的svg就很方便了，所以为了快速的使用图标，我们需要使用webpack中的loader来对svg图片进行配置。 如有不当，敬请告知！ 前提条件：vue2.x版本，webpack3.x版本（so低版本真的恶心） 一、vue项目中引入全局组件SvgIcon 网上一搜一大堆，下面是我之前高版本项目中使用的
使用webpack5从0搭建。 webpack配置分为三个文件webpack.dev.js webpack.common.js webpack.pro.js webpack.dev.js 开发环境配置 webpack.common.js 是公共配置文件 webpack.pro.js 生产环境配置 package.json 配置三个命令 serve 启动 对应配置webpack.dev.js build打包 对应配置webpack.pro.js 要求配置babel，eslint，dev-server, css-loader,scss-loader,post-loader,style-loader,css压缩，JS压缩，file-loader url-loader,clean-webpack-plugin, js多进程打包，
06-06
好的，您的问题是如何使用webpack5从0搭建项目并配置开发环境和生产环境？ 首先，需要安装webpack和webpack-cli： ``` npm install webpack webpack-cli --save-dev ``` 然后，我们需要创建三个配置文件：webpack...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

学习记录wanxiaowan

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值