3.webpack-dev-server配置

修復前面版本的一些問題

在前面2-5分支中，運行後控制檯總會出現一些錯誤。緣由就是client目錄下app.js和App.jsx的文件名類似引發的。所以咱們將app.js從新命名爲main.js，而後修改客戶端webpack的入口文件爲main.js便可。

webpack-dev-server的做用

前面都是buil命令，直接在硬盤上生成打包好的文件。而咱們在開發過程當中，每每會在本地啓動一個服務器，webpack-dev-server就是幫助咱們啓動一個本地的服務器。本屆主要時配置webpack的devServer屬性，感興趣的能夠先去看看官方文檔。

本節內容須要安裝兩個開發環境的依賴。

1. webpack-dev-server 啓動本地服務器
2. cross-env 判斷不一樣系統下的開發或生產環境

因爲開發時的配置，因此主要是修改client端的配置文件。並且須要判斷是否爲開發環境。

const isDev = process.env.NODE_ENV === 'development'   //判斷是否爲開發環境

// 之前是直接 module.exports = config {}
// 如今須要在開發時增長一些配置
config = {....}   // 仍是之前的配置，省略
// 若是時開發環境，增長以下配置
if (isDev) {
  config.devServer = {
    host: '0.0.0.0', // 能夠經過localhost或127.0.0.1方式訪問
    port: '8888', // 端口號
    contentBase: path.join(__dirname, '../dist'), // 訪問的文件目錄
    // hot: true, // 熱更替，後面配置react後會開啓
    overlay: {
      errors: true  // 在瀏覽器窗口出口錯誤的提示層
    },
    publicPath: '/public', // 與前面的功能一致
    historyApiFallback: {
      index: '/public/index.html' // 404頁面默認回到首頁
    }
  }
}

module.exports = config

前面咱們在webpack中配置了mode:'development',就已經設置爲開發模式了。關於mode這個屬性，能夠去看看官方文檔。

接下來，咱們在package.json中配置scripts。

// cross-env判斷不一樣系統環境下的NODE_ENV的值
    "dev:client": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.client.js"

注意，運行dev:client命令時，記得先刪除本地編譯的dist目錄。

本節代碼位於倉庫的2-6分支