配置 dev-server

webpack-dev-server

1. 安裝依賴包

   yarn add webpack-dev-server -D

2. 經常使用配置

   devServer: {
     contentBase: path.join(__dirname, 'static'),    // 告訴服務器從哪裏提供內容(默認當前工做目錄)
     openPage: 'views/index.html',  // 指定默認啓動瀏覽器時打開的頁面
     index: 'views/index.html',  // 指定首頁位置
     watchContentBase: true, // contentBase下文件變更將reload頁面(默認false)
     host: 'localhost', // 默認localhost,想外部可訪問用'0.0.0.0'
     port: 8080, // 默認8080
     inline: true, // 能夠監控js變化
     hot: true, // 熱啓動
     open: true, // 啓動時自動打開瀏覽器（指定打開chrome，open: 'Google Chrome'）
     compress: true, // 一切服務都啓用gzip 壓縮
     disableHostCheck: true, // true：不進行host檢查
     quiet: false,
     https: false,
     clientLogLevel: 'none',
     stats: { // 設置控制檯的提示信息
       chunks: false,
       children: false,
       modules: false,
       entrypoints: false, // 是否輸出入口信息
       warnings: false,
       performance: false, // 是否輸出webpack建議（如文件體積大小）
     },
     historyApiFallback: {
       disableDotRule: true,
     },
     watchOptions: {
       ignored: /node_modules/, // 略過node_modules目錄
     },
     proxy: { // 接口代理（這段配置更推薦：寫到package.json，再引入到這裏）
       "/api-dev": {
         "target": "http://api.test.xxx.com",
         "secure": false,
         "changeOrigin": true,
         "pathRewrite": { // 將url上的某段重寫（例如此處是將 api-dev 替換成了空）
           "^/api-dev": ""
         }
       }
     },
     before(app) { },
   }

   根據目錄結構的不一樣，contentBase、openPage 參數要配置合適的值，不然運行時應該不會馬上訪問到你的首頁; 同時要注意你的 publicPath，靜態資源打包後生成的路徑是一個須要思考的點，這與你的目錄結構有關。

3. package.json 添加運行命令

   "scripts": {
     "dev": "cross-env BUILD_ENV=development webpack-dev-server --mode development --colors --profile"
   }

   不一樣操做系統傳遞參數的形式不同，cross-env 能夠抹平這個平臺差別。

4. 實用技巧：

   1. dev-server 的代碼一般在內存中，但也能夠寫入硬盤，產出實體文件：

      {
        writeToDisk: true,
      }

      一般能夠用於代理映射文件調試，編譯時會產出許多帶 hash 的js 文件，不帶 hash 的文件一樣也是實時編譯的。

   2. 有的時候，啓動服務時，想要默認使用本地的 ip 地址打開：

      {
        disableHostCheck: true, // true：不進行host檢查
        // useLocalIp: true, // 建議不在這裏配置
        // host: '0.0.0.0', // 建議不在這裏配置
      }

      同時還須要將 host 配置爲 0.0.0.0，這個配置建議在 scripts 命令中追加，而非在配置中寫死，不然未來不想要這種方式往回改折騰，取巧一點，配個新命令：

      "dev-ip": "yarn run dev --host 0.0.0.0 --useLocalIp",

   3. 有時啓動的時候但願是指定的調試域名，例如：local.test.baidu.com：

      {
        open: true,
        public: 'local.test.baidu.com:8080', // 須要帶上端口
        port: 8080,
      }

      同時須要將 127.0.0.1 修改成指定的 host，能夠藉助 iHost 等工具去修改，各個工具大同小異，格式以下：

      127.0.0.1 local.test.baidu.com

      服務啓動後將自動打開 local.test.baidu.com:8080 訪問

   4. dev-server 調試時，啓動 gzip 壓縮：

      {
        compress: true,
      }