react 项目搭建后 打包 引入图片的问题

Posted 2023-05-08

参考技术A 我的 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 文件夹规整。

create-react-app 搭建的项目中，引入 webpack-bundle-analyzer 打包分析

1. 安装npm intall webpack-bundle-analyzer --save-dev

2. config/webpack.config.dev.js 文件中，添加

   const BundleAnalyzerPlugin = require(‘webpack-bundle-analyzer‘).BundleAnalyzerPlugin;

   module.exports = {
   　　plugins: [
   　　　　...
   　　　　new BundleAnalyzerPlugin()
   　　]
   }

3. 运行npm run dev，打包分析页面：http://127.0.0.1:8888/