Electron-Vue 开发下 dev/prod/webpack server各种路径设置汇总

背景

在实际开发中，我发现团队对于这几个路径的设置上是纯靠猜的，通过一点点地尝试来找到可行的路径，这是不应该的，我们应该很清晰地了解这几个概念，以下通过截图和代码进行细节讲解。

npm run dev 下的路径如何处理？

1. 我们要搞明白 npm run dev 在干什么？

   1. 这个过程使 webpack 启动了一个本地 http 服务，什么是 http 服务，就是你可以通过 url 的方式（http://loclahost:9080/xxxx） 来获取具体的资源文件，例如 http://localhost:9080/index.html 要获取 index.html 这个服务就会根据逻辑去提取 index.htm 数据并输出出去

   2. 上面的 index.html 是放在内存里面的，webpack 在 run dev 时，会先根据 webpack.xxxx.config.js 配置文件进行打包，但是这个打包结果并不放在硬盘上，而是放在内存里，最终也是要打包成 index.html + index.js（这个就是一堆源码打包的最终 js）

1. webpack dev server 这个 http 服务会同时监听源码入口引入的其他模块代码，只要这些代码有改变，那么 webpack 就会重新打包 index.js

1. 例如__static 路径是在 webpack.xxxxx.config.js 进行配置的

1. 这里要记得渲染进程和主进程是两个独立进程，它们分别都有自己的 webpack.xxxx.config.js 文件，因此两者的__static 设置的可能并不相同

npm run build 时的路径

1. npm run build 时是生产环境下的命令

2. 生产会把代码都打包到 dist 路径下，后续运行的也不是 webpack dev server http 服务来启动，这时 index.html 下可以定义一些路径

1. 因为渲染进程是以 src/index.ejs 作为 index.html 生成模板的，所以 index.ejs 最终打包的位置就是__dirname 的位置，如果你想找到 dist/electron/static 则是需要上翻 3 层，就到了 static，这样后续 index.js 使用全局_static 就能很方便地找到 static 路径了

2. 如果你需要找 dist/ 的话，那需要上翻 4 层，以此类推

1. 针对不同的渲染进程，你可以配置不同的模板，来定义自己的__static

webpack dev server 的 static 是啥？

1. 这里的 static 并不是一个具体目录的名字，这是一个配置 key，这个 key 的意思是 dev server http 服务启动后，除了从打包根路径 dist/electron/renderer/pages/main/ 访问 index.html 和 index.js 文件外，当访问一张图片时，dev server 服务去哪里找呢？我们从下面的这个配置就知道是项目根目录下找，这里是个数组，你可以配置多个资源文件路径，也即意味着可以在多个目录下找资源文件

2. 这里的意思是当你访问/static/imgs/logo.png，那就是从根目录下访问这个 logo.png,生产环境

1. 下面就是__static 就是绝对路径， dev 环境下 http://localhost:9080/static/imgs/logo.png

2. 对于 vue 文件中直接访问的图片 如 img src=“../../logo.png”，这个 webpack 并不处理，因为它不知道怎么处理，dev 环境下就是根据配置的资源文件路径下找，但是 prod 环境下，就靠你拷贝具体的资源文件夹到何时的路径了

3. file-loader/url-loader 主要是处理哪些显式引入的，且能正确定位位置的资源文件，将其选择是否 base64 集成或者迁移到打包后的文件下的 imgs/* 下

preload.js 和 inject.js 文件的引入

1. 你不能引用源码的入口文件 index.js，原因是源码的入口文件还没有打包呢，你引进这个源码 index.js 就是引入 index.js，不是把所有 index.js 引入的其他代码都引入了（没有任何机制在帮你做这件事）

   1. 你可以用 webpack dev server 起一个服务，来单独打包这个 js，然后对外输出，你就可以引入 localhost:9080/preload.js，这样是否支持热更，不得而知

2. 因此，你必须直接引打包完成的 dist/electron/preload/web/whatsapp/preload.js 这个文件，这个文件是整合好的，引入就全引入了