webpack5打包图片遇到的问题与解决方案
2022/8/20 23:54:26
本文主要是介绍webpack5打包图片遇到的问题与解决方案,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
使用webpack提供的 asset/resource 做图片的打包处理,但是只能识别css中的路径,如:.title { color: red; background: url('/src/assets/imgs/456.jpeg'); width: 100%; height: 100vh; }
但是对于
<img src="/src/assets/imgs/123.jpeg" alt="" />
却无能为力。
所以采用了覆盖式的处理方法,即
const CopyPlugin = require("copy-webpack-plugin"); //拷贝指定文件夹原样打包到指定目录 new CopyPlugin({ patterns: [{ from: "./src/assets/imgs", to: "./src/assets/imgs" }], }),
这个插件可以不打包做原样复制到输出文件
最后一步就是配置一下
output: { assetModuleFilename: "src/assets/imgs/[name][ext]", },
就是
assets模块的文件输出地址。这样的话相同文件会覆盖,然后就不会打出来的包里面有相同的文件不同的名字了,但是这个解决办法应该不是最终的解决办法,如果有更好的办法希望大家给予指出
这篇关于webpack5打包图片遇到的问题与解决方案的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-09flutter3.x_macos桌面os实战
- 2024-05-09Rust中的并发性:Sync 和 Send Traits
- 2024-05-08使用Ollama和OpenWebUI在CPU上玩转Meta Llama3-8B
- 2024-05-08完工标准(DoD)与验收条件(AC)究竟有什么不同?
- 2024-05-084万 star 的 NocoDB 在 sealos 上一键起,轻松把数据库编程智能表格
- 2024-05-08Mac 版Stable Diffusion WebUI的安装
- 2024-05-08解锁CodeGeeX智能问答中3项独有的隐藏技能
- 2024-05-08RAG算法优化+新增代码仓库支持,CodeGeeX的@repo功能效果提升
- 2024-05-08代码报错不用愁,CodeGeeX一键完成代码修复、错误解释的功能上线了!
- 2024-05-08今天开始程序员不用再发愁写commit message了,全部由CodeGeeX自动完成!