umi webpack配置图片资源转base64

简介: umi webpack配置图片资源转base64

问题
在使用微前端过程中,子应用图片出现404问题,在设置了路径情况下依然404,发现背景图的资源地址不走公共路径,那就只能另辟捷径了,似乎转成base64是个好的方式。

通常情况下umi中的静态资源图片,小于10K的会自动编译为base64直接使用。但是超过10k的就得另外处理了

解决方式:
使用chainWebpack配置对带有标识的静态资源使用loader

npm下载file-loader url-loader
file-loader提供将静态资源作为模块引入的能力,url-loader比file-loader更强大,但是依赖于file-loader

npm i --save-dev file-loader url-loader

umirc文件配置webpack


chainWebpack(config) {
   
    config.module
      .rule('images')
      // 匹配文件后缀
      .test(/\.(png|jpe?g|gif|svg)$/)
      .use('url-loader')
      .loader('url-loader') 
      .options({
   
        // 小于多少字节的文件编译为base64
        limit: 81920,
        // 导出地址,导出名
        name: "static/[name].[hash:8].[ext]"
      })
      .end()
  },
相关文章
|
6天前
|
JavaScript 前端开发 UED
如何配置 Webpack 进行代码分离?
通过以上方法,可以有效地配置Webpack进行代码分离,根据项目的具体需求和场景选择合适的方式,能够显著提高应用的性能和用户体验。在实际应用中,还可以结合其他优化技术,进一步优化Webpack的打包结果和应用的加载速度。
20 5
|
6天前
|
前端开发 JavaScript
webpack相关配置
以上只是Webpack配置的一些常见部分,实际应用中还可以根据具体的项目需求和场景进行更复杂和细致的配置,以满足不同的构建和优化要求。
17 2
|
6天前
|
缓存 JavaScript 前端开发
配置 Webpack 进行代码分离的常见方法有哪些?
通过以上常见方法,可以根据项目的具体需求和场景,灵活地配置Webpack进行代码分离,从而提高应用的性能和加载速度,优化用户体验。
14 3
|
13天前
|
缓存 前端开发 JavaScript
前端性能优化:Webpack与Babel的进阶配置与优化策略
【10月更文挑战第28天】在现代Web开发中,Webpack和Babel是不可或缺的工具,分别负责模块打包和ES6+代码转换。本文探讨了它们的进阶配置与优化策略,包括Webpack的代码压缩、缓存优化和代码分割,以及Babel的按需引入polyfill和目标浏览器设置。通过这些优化,可以显著提升应用的加载速度和运行效率,从而改善用户体验。
32 6
|
15天前
|
缓存 监控 前端开发
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第26天】前端工程化是现代Web开发的重要趋势,通过将前端代码视为工程来管理,提高了开发效率和质量。本文详细对比了Webpack和Gulp两大主流构建工具的选择与配置优化,并提供了具体示例代码。Webpack擅长模块化打包和资源管理,而Gulp则在任务编写和自动化构建方面更具灵活性。两者各有优势,需根据项目需求进行选择和优化。
46 7
|
16天前
|
前端开发
配置 Webpack 实现热更新
【10月更文挑战第23天】还可以进一步深入探讨热更新的具体实现细节、不同场景下的应用案例,以及如何针对特定需求进行优化等方面的内容。通过全面、系统地了解 Webpack 热更新的配置方法,能够更好地利用这一功能,提升项目的开发效率和性能表现。同时,要不断关注 Webpack 及相关技术的发展动态,以便及时掌握最新的热更新技术和最佳实践。
|
14天前
|
缓存 前端开发 JavaScript
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第27天】在现代前端开发中,构建工具的选择对项目的效率和可维护性至关重要。本文比较了Webpack和Gulp两个流行的构建工具,介绍了它们的特点和适用场景,并提供了配置优化的最佳实践。Webpack适合大型模块化项目,Gulp则适用于快速自动化构建流程。通过合理的配置优化,可以显著提升构建效率和性能。
27 2
|
前端开发 JavaScript 编解码
走近webpack(3)--图片的处理
  上一章,咱们学了如何用webpack来打包css,压缩js等。这一篇文章咱们来学习一下如何用webpack来处理图片。废话不多说,咱们开始吧。   首先,咱们随便找一张你喜欢的图片放到src/images目录下,然后把图片设置为背景图片,代码是这个样子。
1859 0
|
2月前
|
JavaScript
webpack打包TS
webpack打包TS
131 60
|
1月前
|
缓存 前端开发 JavaScript
Webpack 打包的基本原理
【10月更文挑战第5天】