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()
  },
相关文章
|
7天前
|
前端开发 JavaScript Shell
「offer来了」从基础配置到高级配置,16大知识点带你巩固webpack知识体系
该文章系统地总结了Webpack从基础配置到高级配置的16个关键知识点,包括Loader与Plugin的工作机制、源代码映射(Source Map)的使用、模块划分策略、性能优化技巧等内容,并提供了实际配置示例帮助理解和应用。
「offer来了」从基础配置到高级配置,16大知识点带你巩固webpack知识体系
|
9天前
|
JavaScript 测试技术 Windows
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
本文介绍了如何使用vue-cli和webpack为Vue项目配置不同的生产和测试环境,包括修改`package.json`脚本、使用`cross-env`处理环境变量、创建不同环境的`.env`文件,并在`webpack.prod.conf.js`中使用`DefinePlugin`来应用这些环境变量。
25 2
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
|
8天前
|
缓存 资源调度 JavaScript
万字总结webpack实战案例配置
该文章总结了Webpack在实际项目中的配置案例,包括如何配置多页面应用、使用高级插件、优化构建速度及减少输出文件大小等方面的实战经验。
|
2月前
|
前端开发 JavaScript 开发者
Angular与Webpack协同优化:打造生产级别的打包配置——详解从基础设置到高级代码拆分和插件使用
【8月更文挑战第31天】在现代前端开发中,优化应用性能和加载时间至关重要,尤其是对于使用Angular框架的项目。本文通过代码示例详细展示了如何配置Webpack,以实现生产级别的打包优化。从基础配置到生产环境设置、代码拆分,再到使用加载器与插件,每个步骤都旨在提升应用效率,确保快速加载和稳定运行。通过这些配置,开发者能更好地控制资源打包,充分发挥Webpack的强大功能。
38 0
|
2月前
|
JavaScript 测试技术
在不同 webpack 版本的 Vue 项目中配置 Storybook
在不同 webpack 版本的 Vue 项目中配置 Storybook
|
5月前
|
JavaScript 前端开发
webpack成长指北第9章---webpack如何对icon字体进行打包
webpack成长指北第9章---webpack如何对icon字体进行打包
107 1
|
25天前
|
JavaScript
webpack打包TS
webpack打包TS
|
10天前
|
缓存
webpack 打包多页面应用
webpack 打包多页面应用
|
22天前
webpack 打包多页面应用
webpack 打包多页面应用
下一篇
无影云桌面