背景

在實際開發中，我發現團隊對于這幾個路徑的設置上是純靠猜的，通過一點點地嘗試來找到可行的路徑，這是不應該的，我們應該很清晰地了解這幾個概念，以下通過截圖和代碼進行細節講解。

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 這個文件，這個文件是整合好的，引入就全引入了