create-react-app与electron项目整合：解决打包后无法加载图片但执行electron-packager后无法加载的问题。命令将项目打包成exe文件，图片加载不出来，控制台报错提示NOT_FOUND。加载图片的根路径为系统盘根目录，代码为相对路径。按理说，根路径应该是项目根目录。控制台提示如下：首先介绍一下我最终使用的解决方案：第一步：执行npmruneject,yarnejectyarnrunv1.17.3$react-scriptsejectNOTE:CreateReactApp2+supportsTypeScript,Sass,CSSModulesandmorewithout弹出：https://reactjs.org/blog/2018...？您确定要弹出吗？此操作是永久性的。(y/N)执行y后重启工程，失败，报错如下：[0]Failedtocompile.[0][0]./src/index.js[0]错误：[BABEL]F:Reactelectronreact-material-dashboardsrcindex.js:找不到模块'@babel/plugin-syntax-jsx'（处理时：“F:\React\electron\react-material-dashboard\node_modules\babel-preset-react-app\index.js$1$0")[0]atArray.reduce()需要删除删除node_module文件并重新安装依赖，重新开始，并成功启动。第二步：修改配置文件config/webpack.config.js，在module.rules数组中的图片加载规则中加入isEnvDevelopment&&，使该规则只在开发模式下生效：oneOf:[//"url"loaderworks像“文件”加载器，除了它嵌入资产//小于指定的字节数限制作为数据URL以避免请求。//缺少`test`等同于匹配。isEnvDevelopment&&{测试：[/\.bmp$/,/\.gif$/,/\.jpe?g$/,/\.png$/],loader:require.resolve('url-loader'),options:{limit:10000,name:'static/media/[name].[hash:8].[ext]',},}，问题类似的问题有：https://github.com/electron-r...本期，作者描述的问题和我遇到的一模一样，根据第一个回答，需要把webpack.config中的{test....loader:'url-loader'}删掉.production.js，create-react-app隐藏了webpack的配置细节，所以先通过执行npmruneject来暴露webpack的配置，在webpack.config.js中找到相同的配置：删除这两行代码，重新打包，并且图像可以正常加载。猜测问题可能是url-loader引起的，那么url-loader是做什么的呢？参考这篇文章：webpackfile-loader和url-loader的区别file-loader可以解析项目中的url导入（不限于css），根据我们的配置将图片复制到相应的路径，然后根据我们的配置，修改打包后的文件引用路径，指向正确的文件。如果图片很多，会发送很多http请求，会降低页面性能。这个问题可以通过url-loader来解决。url-loader将对导入的图像进行编码以生成dataURl。相当于把图像数据翻译成一串字符。然后把这串字符打包成一个文件，最后只需要导入这个文件就可以访问图片了。当然，如果图片很大，编码会消耗性能。所以url-loader提供了一个limit参数。小于限制的文件将转换为DataURl，大于限制的文件将使用文件加载器复制。url-loader和file-loader是什么关系？简而言之，url-loader包装了file-loader。url-loader不依赖于file-loader，即使用url-loader时，只需要安装url-loader即可，无需安装file-loader，因为url-loader内置了file-loader。通过上面的介绍，我们可以看出url-loader在两种情况下工作：1.文件大小小于limit参数，url-loader会将文件转换为DataURL；2、文件大小超过限制，url-loader会调用file-loader进行处理，参数直接传给file-loader。所以我们只需要安装url-loader。发起http请求。..url-loader会对导入的图片进行编码。众所周知，electron在封装之后，使用的是文件访问协议，而不是http协议。至此，问题的根源已经定位。那么解决办法应该是放弃使用url-loader加载图片，直接使用file-loader。但是我也想在开发的时候保持原来的url-loader不变，所以把webpack.config.js中的图片加载规则改成了oneOf:/小于指定的字节限制作为数据URL以避免请求。//缺少`test`等同于匹配。isEnvDevelopment&&{测试：[/\.bmp$/,/\.gif$/,/\.jpe?g$/,/\.png$/],loader:require.resolve('url-loader'),options:{limit:10000,name:'static/media/[name].[hash:8].[ext]',},}还有一种方式不需要执行npmruneject命令：更改通过安装react-app-rewired模块来配置项目的webpack。另外，安装customize-cra模块，简化配置项。方法具体步骤：1、安装模块yarnaddreact-app-rewiredcustomize-cra2、修改package.json文件/*package.json*/"scripts":{-"start":"react-脚本开始”，+“开始”：“react-app-rewiredstart”，-“build”：“react-scriptsbuild”，+“build”：“react-app-rewiredbuild”，-“test”：“react-scriptstest",+"test":"react-app-rewiredtest",}3.在项目根目录添加config-overrides.js文件，添加如下内容：const{override,addLessLoader}=require('customize-cra');//将打包改为图片加载方式，解决electron打包后无法加载图片的问题constcustomizeImageLoader=()=>config=>{config.module.rules[2].oneOf.push({测试:[/\.bmp$/,/\.gif$/,/\.jpe?g$/,/\.png$/],loader:'file-loader'});返回配置；}module.exports=override(customizeImageLoader());这种方式的缺点是：多安装了两个模块：react-app-rewired和customize-cra与npmruneject暴露配置文件的方式相比，这种方式不透明，后期维护难度大，参考：React-CRA多页面配置（npmruneject）customize-craAPI说明
