webpack-dev-server是一個基于Node.js的開發服務器，用于在開發過程中提供實時的熱更新和自動刷新功能。它可以監聽文件的變化，并在文件改變時重新編譯和刷新頁面，以提高開發效率。
使用webpack-dev-server的步驟如下：
安裝webpack-dev-server：在項目根目錄下執行 npm install webpack-dev-server --save-dev 命令進行安裝。
在webpack配置文件中配置devServer選項：
module.exports = {
// ...其他配置項
devServer: {
contentBase: path.resolve(__dirname, 'dist'), //指定服務的根目錄
port: 8080, //指定服務端口號
hot: true, //啟用熱更新
open: true, //自動打開瀏覽器
},
};
{
"scripts": {
"start": "webpack-dev-server --config webpack.config.js",
//...
}
}
npm start 命令啟動webpack-dev-server。啟動后，webpack-dev-server會將項目的代碼編譯并打包到內存中，并啟動一個本地服務器，監聽指定的端口號。在瀏覽器中訪問 http://localhost:8080 就可以查看項目的運行結果。當代碼發生改變時，webpack-dev-server會自動重新編譯，并通過熱更新的方式將改變的部分實時更新到瀏覽器中，無需手動刷新頁面。
此外，webpack-dev-server還提供了其他一些選項，如代理、自定義404頁面等，可以根據具體需求進行配置。
