前提

使用webpack構建前端開發環境，可以直接使用webpack構建本地服務，實現頁面儲存自動重新整理。

模組安裝

首先安裝webpack-dev-server模組

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

安裝完成後然後修改webpack.config.js檔案，在裡面新增

module.exports = {
    devtool: 'source-map', //除錯配置，生成source maps
    entry:  __dirname + "/app/main.js",//已多次提及的唯一入口檔案
    output: {
        path: __dirname + "/public"
 
,//打包後的檔案存放的地方
        filename: "js/index.js"//打包後輸出檔案的檔名
    },

    //以下是服務環境配置
    devServer: {
        contentBase: "./public",//本地伺服器所載入的頁面所在的目錄
        historyApiFallback: true,//不跳轉
        inline: true, //實時重新整理
        host: "192.168.0.232", //本機的區域網ip
        open: true //是否執行成功後直接開啟頁面
    }
}

最後，在package.json

"scripts": {
    "server": "webpack-dev-server --open"
  },

直接當前目錄開啟cmd，執行npm run server就可以看到當前頁面，而且還可以重新整理

相關配置

更多功能請看官網這裡