Webpack進階第二節----使用Webpack構建本地服務器

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

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

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

devserver的配置選項	功能描述
contentBase	默認webpack-dev-server會爲根文件夾提供本地服務器，如果想爲另外一個目錄下的文件提供本地服務器，應該在這裏設置其所在目錄（本例設置到“public"目錄）
port	設置默認監聽端口，如果省略，默認爲”8080“
inline	設置爲true，當源文件改變時會自動刷新頁面
historyApiFallback	在開發單頁應用時非常有用，它依賴於HTML5 history API，如果設置爲true，所有的跳轉將指向index.html

把這些命令加到webpack的配置文件中，現在的配置文件webpack.config.js如下所示：

module.exports = {
  devtool: 'eval-source-map',

  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  },

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

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

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

在終端中輸入npm run server即可在本地的8080端口查看結果