作為開發人員，我們在修改了代碼之后，在vscode終端運行npm run dev指令后，希望它可以自動打開瀏覽器方便我們調試，有兩種方式可以實現：
自動打開瀏覽器的兩種方式：
方式一：
1、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、然后在終端輸入npm run dev 即可。
注意：如果報錯請執行以下指令：cnpm install webpack webpack-dev-server webpack-cli --save-dev
解決報錯：
方式二：
1、首先在package.json中配置，如下圖所示：
2、在webpack.config.json中添加配置信息
3、然后在終端輸入npm run dev2
熱加載：
建議使用第一種方式，比較方便，這里介紹另一種方式：
1、配置webpack-dev-server
2、在webpack.config.js啟用熱加載
3、使用插件屬性配置
