(二)建構本地伺服器webpack-dev-server

webpack-dev-server

如果想讓你的浏覽器監聽你的代碼的修改，并自動重新整理顯示修改後的結果，那你就需要單獨安裝它作為項目依賴。

npm install webpack-dev-server -g // 全局安裝
npm install webpack-dev-server --save-dev // 項目内安裝   此練習是在根目錄下安裝      

• 是一個小型node.js express伺服器
• 建立一個開發伺服器，可以serve我們pack以後的代碼，并且當代碼更新的時候自動重新整理浏覽器
• 啟動​

  ​webpack-dev-server​

  ​後，你在目标檔案夾中是看不到編譯後的檔案的，實時編譯後的檔案都儲存到了記憶體當中
• 注：如果要全局安裝着個指令，那麼在全局安裝完webpack之後就可以執行這個指令，如果隻是要安裝到項目中，在項目根目錄下安裝(不加-g，在項目根目錄出現node_modules檔案夾，内含​

  ​webpack-dev-server​

  ​及其依賴包)

​

​devserver​

​作為webpack配置選項中的一項，以下是它的一些配置選項

配置選項	描述
contentBase	預設webpack-dev-server會為根檔案夾提供本地伺服器，如果想為另外一個目錄下的檔案提供本地伺服器，應該在這裡設定其所在目錄（本例設定到“common"目錄）
port	設定預設監聽端口，如果省略，預設為”8080“
inline	設定為true，當源檔案改變時會自動重新整理頁面
historyApiFallback	在開發單頁應用時非常有用，它依賴于HTML5 history API，如果設定為true，所有的跳轉将指向index.html

如果想看更多配置選項請點選​​檢視更多​​​本文以webpack文章的demo為例，如果未閱讀上文，并且想了解完整過程請點選​​回到上文​​在​

​webpack.config.js​

​配置檔案中添加如下代碼：

module.exports = {
    ...
    devServer: {
        contentBase: "./common", // 本地伺服器所加載的頁面所在的目錄
        historyApiFallback: true, // 不跳轉
        inline: true // 實時重新整理
    } 
}      

在​

​package.json​

​​中的​

​scripts​

​對象中添加如下指令，用以開啟本地伺服器：

{
 ...
  "scripts": {
    ...
    "server": "webpack-dev-server --open"
  },
  ...
  **2.0版本**
  "devDependencies": {
    "webpack": "^3.5.6", 
    "webpack-dev-server": "^2.5.1"
  }
  **4.0版本**
  "devDependencies": {
    "webpack": "^4.29.5",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.1.14"
  }
}      

**注意：​

​webpack​

​​版本與​

​webpack-dev-server​

​​版本有相容，注意檢視版本号。

在終端中輸入​​

​npm run server​

​​即可在本地的​

​8080​

​端口檢視結果如下：

image.png

頁面運作結果：