Vue學習筆記之Webpack搭建本地伺服器及配置檔案的分離

1、webpack提供了一個可選的本地開發伺服器（修改的檔案先儲存在記憶體中），這個本地開發伺服器基於node.js搭建的，內部使用express框架，可以實現我們想要的瀏覽器自動重新整理顯示我們修改後的結果，就避免了我們每次修改了程式碼都要執行npm run build進行打包動作，介面上才會更新我們修改的東西。

2、環境安裝：cnpm install webpack-dev-server@2.9.1 --save-dev

3、配置環境屬性：

contentBase：為哪一個資料夾提供本地伺服器，預設是根目錄，而我們這邊需要指定目錄：./dest

port：埠號（可以不指定，預設為8080埠）

inline：頁面實時重新整理

historyApiFallback：在SPA頁面中，依賴HTML5的history模式

4、執行服務：webpack-dev-server，最後完成修改再通過npm run build將專案打包成物理檔案。

為了簡化命令，同時讓專案在本地找此命令(安裝是沒有選擇全域性變數，如果不配置，直接執行，會報錯說此命令不存在，因為安裝時是區域性安裝，所以全域性是找不到此命令的)：

PS： --open 的命令是在你執行完npm run dev命令時直接就開啟瀏覽器進行預覽了。

這樣執行後，更新的程式碼是先儲存記憶體中，並未直接生成物理檔案：

此時直接訪問本地伺服器的地址即可。

5、配置檔案的分離：然而，在開發時，不需要進行js程式碼的壓縮，這樣不利於程式碼除錯，在真正專案打包的時候再進行程式碼壓縮；同時，在正式打包專案的時候，本地伺服器的配置也是不需要進行打包的。所以，可以把這些配置檔案進行分離：將開發時跟釋出需要的進行分離

首先，建立一個新的配置檔案：base.config.js檔案，然後將webpack.config.js裡面內容全部拷貝過去，註釋或刪除掉開發、專案打包需要的配置，留下基本的配置內容：

然後新增兩個配置檔案：dev.config.js（開發需要的配置）和prod.config.js（打包釋出需要的配置）分別滿足開發及打包釋出時的配置檔案：

開發需要的配置檔案：

專案打包需要的配置檔案：

接下來，在開發的時候將 base.config.js 與 dev.config.js 檔案進行合併編譯，在專案打包的時候則將 base.config.js 與 prod.config.js 檔案進行合併編譯，但是，做這個動作需要merge(合併)命令進行輔助編譯，所以我們需要安裝此環境：cnpm install webpack-merge@4.1.5 --save-dev

安裝成功後，在dev跟prod兩個配置檔案中匯入此環境，然後通過此命令進行合併：

合併prod的內容：

最後在build 跟 dev 中指定需要執行的目錄檔案即可：

PS：此時配置完後，原來的webpack.config.js檔案就可以刪除不用了。

但是，此時去打包專案檔案的時候，發現打包檔案被打包到build的目錄下了，並沒有將檔案打包到根目錄下的dist檔案家裡面：

原因是base配置檔案在build目錄下，所以編譯的時候在本目錄下增加一個dist檔案，所以要修改dist檔案的生成目錄：將 dist 改為 ../dist ：

最後重新再打包專案，則將檔案正常生成在根目錄下的dist資料夾中。