使用webpack構建本地服務器

　　想不想讓你的瀏覽器監聽你的代碼的修改，並自動刷新顯示修改后的結果，其實Webpack提供一個可選的本地開發服務器，這個本地服務器基於node.js構建，可以實現你想要的這些功能，不過它是一個單獨的組件，在webpack中進行配置之前需要單獨安裝它作為項目依賴。

　　1、安裝webpack-dev-server

 　　配置好后執行 webpack-dev-server，這時候會報錯。需要在package.json加上服務器信息。

　　2、在package.json中的scripts對象中添加如下命令，用以開啟本地服務器

"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack", "server": "webpack-dev-server --open" },

　　3、下載好之后需要在webpack.config.js里面配置下devServer

const path = require('path'); module.exports={ //入口文件的配置項
 entry:{ entry:'./src/index.js' }, //出口文件的配置項
 output:{ //輸出的路徑，用了Node語法
        path:path.resolve(__dirname,'dist'), //輸出的文件名稱
        filename:'bundle.js' }, mode:"development", //模塊：例如解讀CSS,圖片如何轉換，壓縮
 module:{}, //插件，用於生產模版和各項功能
 plugins:[], //配置webpack開發服務功能
 devServer:{ contentBase:path.resolve(__dirname,'dist'),//本地服務器所加載的頁面所在的目錄
        host:'192.168.118.221', compress:true, port:8081 }// 配置webpack服務
}

　　host是你自己的ip地址，port是端口號

　　devserver作為webpack配置選項中的一項，以下是它的一些配置選項

devServer: { contentBase: "./public",//本地服務器所加載的頁面所在的目錄
    historyApiFallback: true,//不跳轉
    inline: true//實時刷新
  } 

　　4、配置好后，在終端執行npm run server，發現還是會報錯。如下圖所示，webpack-cli沒有安裝

　　5、安裝webpack-cli：

　　注意：需要全局和局部都安裝。先npm install webpack-cli -g，再npm install webpack-cli -D，否則的話，依然會報上面的錯誤。

　　6、執行npm run server

　　執行成功