【webpack擴展】- 2、開發服務器webpack-dev-server

關於webpack-dev-server

在**開發階段**，目前遇到的問題是打包、運行、調試過程過於繁瑣，回顧一下我們的操作流程：1. 編寫代碼 --> 2. 控制檯運行命令npx webpack完成打包 --> 3. 打開頁面查看效果 – >4. 繼續編寫代碼，回到步驟2

並且，我們往往希望把最終生成的代碼和頁面部署到服務器上，來模擬真實環境

---

爲了解決這些問題，webpack官方製作了一個單獨的庫：webpack-dev-server

• webpack-dev-server既不是plugin也不是loader,他是官方的一個庫

先來看看它怎麼用:

1. 安裝 – 開發依賴
2. 執行npx webpack-dev-server命令

• webpack-dev-server命令幾乎支持所有的webpack命令參數，如--config、-env等等，你可以把它當作webpack命令使用

• 這個命令是專門爲開發階段服務的，真正部署的時候還是得使用webpack命令

• 並不會真正的去打包，不會生成dist目錄，而是搭建了一個開發階段的服務器環境

• 啓動開發服務器後，修改代碼後，頁面就會自動刷新，不需要重新運行命令， 這個命令不像webpack 命令，打包後就結束了，這個命令不會結束

• 有了webpack-dev-server 後，整個打包過程就會再紅線位置斷開，不生產最終的打包結果，一直運行，監聽文件變化，文件一旦變化就重新進行打包，需要結束的化就ctrl + c
  

---

webpack-dev-server 原理

當我們執行webpack-dev-server命令後，它做了以下操作：

1. 內部執行webpack命令，傳遞命令參數
2. 開啓watch
3. 註冊hooks：類似於plugin，webpack-dev-server會向webpack中註冊一些鉤子函數，主要功能如下：
   
   1. 將資源列表（aseets）保存起來-- 把compilation.assets 存到內存裏：var assets = compilation.assets
   2. 禁止webpack輸出文件 – 清空webpack 輸出的資源：compilation.assets ={}
   3. 所以會一直打包，但不會輸出
   4. 用express開啓一個服務器，監聽某個端口，當請求到達後，根據請求的路徑，給予相應的資源內容 – 由於監聽了端口，所以weback-dev-server一直不會停

配置

針對webpack-dev-server的配置，參考：https://www.webpackjs.com/configuration/dev-server/

常見配置有：

• port：配置監聽端口
• proxy：配置代理，常用於跨域訪問
• stats：配置控制檯輸出內容

//webpack.config.js
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    mode: "development",
    devtool: "source-map",
    output: {
        filename: "scripts/[name].[chunkhash:5].js"
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: "./public/index.html"
        })
    ],
    devServer: {
        port: 8000,  // 1. 監聽的端口號
        open: true,  // 2. 開啓服務器後，自動打開瀏覽器，自動訪問地址 Http:localhost:8000
        index:'index.html', //  3.默認配置是index.html 當訪問Http:localhost:8000 時，沒寫具體的資源文件，會加上index.html 訪問Http:localhost:8000/index.html
        proxy: { // 4.配置代理規則
            "/api": {   //5.-- 這是個正則表達式，只要請求地址中能夠符合正則表達式，就用代理，把協議，主機名，端口 換成代理的
                target: "http://open.duyiedu.com",
                changeOrigin: true //6. 請求時候的request headers，如果不配置，請求頭裏還是localhost：8000，服務器要求請求頭匹配， 所以要更改請求頭中的host和origin
            }
        }
    },
    stats: {  // 控制webpack打包時命令行-控制檯裏的輸出
        modules: false, // 不輸出打包模塊
        colors: true  //打包輸出顯示顏色
    }
}

• 配置文件的融合發生在webpack 打包的第一階段--初始化階段，發生文件改動，重新編譯是第二階段編譯階段，並不會重新讀取初始化配置，所以需要重新運行webpack-dev-server ,修改package.json裏的腳本後 npm run dev
• 前端頁面開發完後，一般和後臺服務部署到同一個域中，這樣上線後是沒有跨越問題的，但是開發階段會有跨越問題，本地服務一般是localhost 和後臺提供的服務協議，主機名，端口都可能不一致
• 前端使用代理來解決跨越問題，

例如：

1. 前端訪問的接口是：http:localhost:8000/api/student/findAll
2. 請求會交給 webpack-dev-server來處理，因爲dev-server 一直監聽着本地的8000端口
   配置好代理後，dev-server 會去請求：代理地址+/student/findAll， 因爲dev-server是運行在node環境的服務器端，所以是沒有跨越問題的，跨越只存在瀏覽器端
3. 將響應結果返回
   注意：changeOrigin: true
   請求時候的request headers–請求頭裏還是localhost：8000，服務器要求請求頭匹配， 所以要配置changeOrigin: true 更改請求頭中的host和origin 爲代理的， 這看服務器而定，有的服務器需要，有的服務器不需要，當然這也是開發時的問題，上線後沒有這個問題

//package.json
  "scripts": {
    "dev": "webpack-dev-server"
  },