我的 webpack 版本是5.70.0 的 如下
"webpack":"^5.70.0",
"webpack-cli":"^4.9.2",
项目运行的时候 在jsx 中引入图片就用require 图片显示正常 打包后显示正常 如下图 引入方式
如果是 通过CSS 样式引入的图片的话 需要修改 webpack的配置
CSS 样式引入图片除了可以去网上 把图片转成base64 后 直接使用 是没有问题的。但是如果直接
background-image:url("assets/common/login_bg_new.png"); 这样呢引入 无论是项目 npm run dev 打开还是 npm run build 图片都无法正常显示。
修改webpack 配置 如图
即可。
项目 npm run build 后 图片 放置到一个文件夹下 需要继续修改 webpack 配置 如图
这样 打包后 项目运行正常 打包正常 打包生成的dist 文件夹规整。