webpack打包文件在本地与线上运行

---

前言

根据上一篇webpack打包优化之后，想将成果物在本地打开运行，发现只能展示空白页面。为何将成果包扔在线上可以正常运行呢，本文探讨一下。

本地运行

打包后的成果物文件如下图所示。

直接打开index.html文件，页面显示空白。

去网上搜了一下原因，发现是资源路径的问题，具体讲述可看下面这篇别人写的文章。
我改了个属性pulicPath: ‘./’, 重新打包后可正常展示页面。涉及到路由的操作可自己尝试，我没有试过。

文章链接： https://www.jianshu.com/p/8bfcae1ddc90

线上运行

将成果包扔到线上怎么可以正常运行呢，我是丢在的80端口，这里可以查看nginx的默认配置。

网址中输入ip:80端口号，会自动加载html文件夹路径下的index.html文件，根路径是html文件夹。index.html文件中引入的相关资源，比如 /js/bundle.js，此资源在html文件夹下可以找到，就可以正常加载资源进行页面显示。

总结

打包的产物在本地运行和在线上环境运行的原理一样，只要引入的资源路径正确，就可以正常加载与展示。