背景：

我們在修改了程式碼之後，在vscode終端執行npm run dev指令後，希望它可以自動開啟瀏覽器方便我們除錯，有兩種方式可以實現：

方法一：

1、在package.json中的“scripts”中加上一行

webpack-dev-server --open --port 3000 --contentBase src --hot

實現這個功能，首先需要安裝 webpack-dev-server，在終端執行這個指令：npm install webpack-dev-server --save-dev即可 指令說明： -- webpack-dev-server 實現自動打包編譯功能（每次修改JS檔案後，都需要webpack執行打包重新生成JS檔案。 1、它會把整個專案以localhost服務形式執行起來，虛擬了一個伺服器； 2、webpack-dev-server會把webpack打包輸出檔案會被託管於（URL）根路徑（本地磁碟dist目錄下的不會發生改變），可以直接伺服器根路徑+輸出JS檔名訪問到） -- open，編譯完自動開啟瀏覽器 -- port 埠，更改執行埠（預設8080） -- contentBase 路徑，更改內容根路徑（預設伺服器根路徑、專案根路徑），也是託管路徑，可以設定為src即剛開啟瀏覽器就訪問到頁面。引用路徑時需要注意這個（例如專案根路徑有node-modules資料夾，預設可以訪問到；修改為src，即根路徑變為src，手動引用時會訪問不到）安裝了html-webpack-plugin後，頁面也託管於根路徑可以直接訪問到，此引數可不需要。 -- hot，熱過載、熱跟新，頁面非同步重新整理，減少不必要的重新整理請求；打補丁，而不是重新編譯，減少不必要的程式碼跟新。 例如下圖：

2、記得還需要安裝webpack哦，請執行以下指令：

npm install webpack webpack-dev-server webpack-cli --save-dev

3、然後在終端輸入npm run dev 即可。

方法二：

1、在package.json中的“scripts”中加上一行

webpack-dev-serverr　

如圖所示：

2、在webpack.config.json中新增配置資訊

devServer:{
        port:3000,
        open: true, //自動開啟瀏覽器
        hot:true, // 啟用熱載入第一步，熱過載、熱跟新，頁面非同步重新整理，減少不必要的重新整理請求；打補丁，而不是重新編譯，減少不必要的程式碼跟新。
        contentBase:'src' // 制定託管的根目錄
},

　如圖所示：

3、然後在終端輸入npm run dev2

看看瀏覽器已經可以看到自己的頁面，並且能時時重新整理啦！