react+webpack打包中遇到的问题

最近在弄一个react的项目,构建一个PC端的网站,通过一星期的加班总算完成了,最后只剩下打包上线就ok了。但是,偏偏在打包上出现了问题。

首先在使用npm run build 打包后,本地打开静态问价时,报错说js、css not found,打算看一下配置文件,看看打包路径的问题,这时发现,使用create-react-app生成的项目中并没有webpack的配置文件,这就很奇怪了。查了一些文档,发现这个配置文件其实是有的,只是隐藏了起来,接下来,我们使用npm run eject,让config目录自己出来。


这些文件具体功能就不赘述了,这里主要说一下paths.js,这个文件就是对打包的项目中一些资源路径配置文件,我们知道在webpack在引用依赖的时候是通过package.json然后加载node_modules中的东西去js中,所以在打包时,不可避免的必须会使用到package.json中的路径。现在我们来看这个path.js,其中暴露了一个对象,而这个对象中    

这里顾名思义就是配置的服务器路径,我们去找getServedPath这个方法,发现其路径是"/",这里将路径修改为相对路径"./",这时候我们再打包一次试试,F12这时候没有报错,但是整个index.html是空白的,这又是什么状况?

重复整理思路,检查配置文件,最后发现浏览器地址栏,并没有渲染出我的路由,查看API后发现我使用的是BrowserRouter ,是使用浏览器的history对象去请求服务器,这需要服务器上有响应的控制器配置,所以很显然这是不可取的,于是我将路由改成了HashRouter,这是使用本地路由的hash值来切换路由的,简单点说就是在浏览器打开时,切换的路由部分之前需要使用“#”将主路由和hash参数分隔,具体的小伙伴们可以下来再看,做完这两步,基本上就没有什么问题了,接下来我重新打包测试,果然一切没有问题了。

你可能感兴趣的:(react+webpack打包中遇到的问题)