技術標籤：webpackwebpack前端

webpack提供了一個可選的本地開發伺服器 webpack-dev-server，這個本地伺服器基於node.js搭建，內部使用express框架，可以實現我們想要的讓瀏覽器自動重新整理顯示我們修改後的結果。

第一步：安裝

它是一個單獨的模組，在使用之前需要先安裝它。

安裝：npm install --save-dev [email protected]

我使用的webpack版本是3.6.0，webpack-dev-server的版本是2.9.0

第二步：配置

安裝好之後我們需要在webpack.config.js檔案中新增 dev-server

選項本身可以設定如下屬性：

• contentBase：為哪一個資料夾提供本地服務，這裡我填寫./dist
• port：埠號，預設為8080
• inline：控制頁面是否實時重新整理。取值為true或false，當為true時，修改了程式碼後頁面會自動重新整理
• historyApiFallback：在SPA頁面中，依賴HTML5的history模式

// webpack.config.js
//...

module.exports = {
   // ...其它配置
  devServer: { 
    contentBase:'./dist',
    inline:true,
  }
}

第三步：使用

此時，如果我們直接在終端中輸入 webpack-dev-server

解決方法：在 package.json 檔案的scripts中，新增一條命令：

//package.json檔案

"scripts": {
    // ...其它命令
    "dev": "webpack-dev-server --open"
 
 //--open表示執行完命令後自動開啟瀏覽器
}

然後我們使用 npm run dev 命令就可以了

再解釋一下scripts中的命令：

• scripts 中定義的都是一些命令，當我們使用 npm run xxx 的時候，就會去package.json檔案中的scripts尋找 xxx 命令來執行。接下來會按照一定的順序尋找命令對應的位置。
• 首先，會在本地的 node_modules/.bin 路徑中尋找對應的命令。如果沒有找到，會去全域性的環境變數中尋找。

注意事項

我的程式碼目錄結構中並沒有 dist 資料夾，看不到編譯後的檔案，但是啟動webpack-dev-server後可以正常執行，原因在於實時編譯後的檔案都儲存到了記憶體當中。