run build 后,怎么在本地测试build打包之后的项目文件

1,085 阅读1分钟

打包出来的build文件大概是这样

b1.jpg

  • 首先全局安装live-server插件 npm install -g live-server
  • 在dist/build文件夹(刚刚打包成功后多出来的文件夹)终端输入 live-server

b2.jpg

  • 启动成功,可以通过8080浏览项目

打包的时候, 使用 html-webpack-plugin,指定的 index.html 里面 引入的本地的一些script 文件,打包之后,有时总是会报某些文件找不到

b3.jpg

  • 因为打包之后的文件,很多都合并到一个文件,有的还压缩了
  • 比如 href="/theme/global.less" 正常情况下webpack打包后,theme这个文件夹会被合并到一个文件里
  • 但是由于在模板index.html文件里,href的指向是写死的,所以打包出来的某些指向文件,也要拷贝文件,或者文件夹到相同目录 于是, copy-webpack-plugin 就用上了

copy-webpack-plugin 的作用就是拷贝文件,或者文件夹

b4.jpg

  • 这样配置,打包出来的目录,就是第一张图那样,复制同级目录文件夹theme到打包目录下,这样就不会存在文件找不到

参考文献:blog.csdn.net/Boale_H/art…

参考文献:cloud.tencent.com/developer/a…

参考文献:blog.csdn.net/JDDDDDDyaya…


结语

前端react QQ群:788023830 ---- React/Redux - 地下老英雄

前端交流QQ群:249620372 ---- FRONT-END-JS前端

(我们的宗旨是,为了加班,为了秃顶……,仰望大佬),希望小伙伴们加群一起学习