webpack系列學習（二）webpack-dev-server

這章，跟你們一塊兒學習webpack-dev-server的配置
1、安裝webpack-dev-server
cnpm i webpack-dev-server -D
webpack.config.js配置以下

// 開發服務器 devServer: 用來自動化(自動編譯，自動打開瀏覽器，自動刷新瀏覽器)
    // 特色：只會在內存中編譯打包，不會有任何輸出
    devServer: {
        // 運行代碼的目錄
        contentBase: resolve(__dirname, 'build'),
        // 監視contentBase下的全部文件，一旦文件變化就會reload
        watchContentBase: true,
        watchOptions: {
            ignore: /node_modules/ // 忽略監視此文件
        },
        // 啓動gzip壓縮
        compress: true,
        port: '8099',
        inline: true, // 文件修改後實時刷新
        historyApiFallback: true, // 不跳轉
        open: true, // 自動打開瀏覽器
        clientLogLevel: 'none', // 不要顯示啓動服務器日誌信息
        quiet: true, // 除了顯示啓動信息外，其餘內容不顯示
        overlay: false, // 若是出現錯誤，不要全屏提示
        proxy: { // 服務器代理--解決開發環境跨域問題
            '/api': {
                // 一旦devServer(5000)服務器收到api/xxx的請求，就會把請求轉發到另外一個服務器(3000)
                target: 'http:localhost:3000',
                // 發送請求時，請求路徑重寫，將/api/xxx --> /xxx(去掉api)
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }

終端命令行輸入
npx webpack-dev-server -D 啓動服務 // 內存中編譯打包，沒有輸出
如圖1.1所示

下一章爲你們講解webpack關於生產環境相關的配置