npm run build 打包后页面无法显示问题

今早运维小哥哥跑来找我，想给我的新项目发个版，我还是按照一般流程npm run build 然后git提交，打个tag v1.0.1，运维小哥哥说你前端页面没写好嘛？

emmmm….老娘早就写好了。肯定是哪里出了问题，我打开一看果然有问题。

果然啥都没有。不用着急，先看下控制台报错。

就说XXXNOT FOUND，极有可能是路径问题。

闲话不多说，我先去试哈。

在config文件夹下面有个index.js，打开里面有个build对象，assetsPublicPath字段，本来是'/'改成'./'，再npm run build,打开dist下面的index.html，果然成了。看来我猜的是对的。

but 我骄傲了么？我轻浮了么？并没有。回头仔细看下原理。

指令分析

package.json文件里的

 "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "build": "node build/build.js"
  }

这两条指令的意思：

• 运行npm run dev 的时候执行的是build/dex-server.js文件，
• 运行npm run build 的时候执行的是build/build.js文件

build文件夹分析

build/dev-server.js

npm run dev 执行的文件build/dev-server.js文件，执行了：

• 检查node和npm版本
• 引入相关插件和配置
• 创建express服务器和webpack编译器
• 配置开发中间件(webpack-dev-middleware)和热重载中间件(webpack-hot-middleware)
• 挂载代理服务和中间件
• 配置静态资源
• 启动服务器监听特定窗口（8080）
• 自动打开浏览器并打开特定网址（localhost：8080）

说明：express服务器是提供静态文件服务，不过它还使用了http-proxy-middleware。一个http请求代理的中间件，前端开发过程中需要使用到后台的API的话，可以通过配置proxyTable来将相应的后台请求代理到专用的Api服务器。

build/webpack.base.conf.js

dev-server依赖的webpack配置是webpack.dev.conf.js文件，测试环境下使用的是webpack.base.conf.js，webpack.dev.conf.js中又引用了webpack.base.conf.js，webpack.base.conf.js主要完成了下面这些事情：

• 配置webpack编译入口
• 配置webpack输出路径和明明规则
• 配置模块resolve规则
• 配置不同类型模块的处理规则
  这个配置里面只配置了.js 、.vue、图片、字体等几类文件的处理规则额，如果需要处理器她文件可以在 module.rules里面配置。

build/webpack.dev.conf.js

在webpack.base.conf.js的基础上增加完善了开发环境下面的配置，主要包括下面几件事情：

• 将hot-reload相关的代码添加到entry chunkd
• 合并基础的webpack配置
• 使用styleLoaders
• 配置Source Maps
• 配置webpack操作

build/check-versions.js和build/dev-client.js

最后是build文件夹下面两个比较简单的文件，
dev-client.js似乎没有使用到，代码也比较简单。
check-version.js完成对node和npm的版本检测。

build/utils.js和build/vue-loader.conf.js

webpack配置文件中使用到了utils.js和vue-loader这两个文件，utils主要完成下面三件事：

• 配置静态资源路径
• 生成cssloaders用于加载.vue文件中的样式
• 生成styleLoaders用于加载不在.vue文件中的单独存在的样式文件

vue-loader.conf则只配置了css加载器以及编译css之后自动添加前缀。

build/build.js

构建环境下的配置，build.js主要完成下面几件事：

• loading动画
• 删除创建目标文件夹
• webpack编译
• 输出信息

build/webpack.prod.conf.js

构建的时候用到的webpack配置来自webpack.prod.conf.js，该配置同样是在webpack.base.conf基础上的进一步完善。主要完成下面几件事情：
- 合并基础的webpack配置
- 使用styleLoaders
- 配置webpack的输出
- 配置webpack插件
- gzip模式下的webpack插件配置
- webpack-bundle分析

说明： webpack插件里面多了丑化压缩代码以及抽离css文件等插件。

config文件夹分析

config/index.js

config文件夹下最主要的文件就是index.js了，在这里面描述了开发和构建两种环境下的配置，前面的build文件夹下也有不少文件引用了index.js里面的配置。

config/dev.env.js、config/prod.env.js和config/test.env.js

这三个文件就简单设置了环境变量而已，没什么特别的。这是webpack的基本入门，webpack还有很多插件，还需要去探索。后面写这几个文件的源码解释。

文章参考 https://www.cnblogs.com/hl0203/p/7138600.html