06-开发环境配置

开发环境配置

配置高效的开发环境，提升开发体验。本章介绍 Webpack DevServer、热模块替换（HMR）、Source Map 等开发环境配置。

---

📋 学习目标

• ✅ 配置 Webpack DevServer
• ✅ 使用热模块替换（HMR）
• ✅ 配置 Source Map
• ✅ 配置代理
• ✅ 优化开发体验

---

Webpack DevServer

Webpack DevServer 提供了一个开发服务器，支持热更新、代理等功能。

安装

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

基础配置

module.exports = {
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist')
    },
    port: 3000,
    open: true,
    hot: true
  }
}

常用配置选项

module.exports = {
  devServer: {
    // 静态文件目录
    static: {
      directory: path.join(__dirname, 'public'),
      publicPath: '/'
    },
    
    // 端口
    port: 3000,
    
    // 自动打开浏览器
    open: true,
    
    // 热模块替换
    hot: true,
    
    // 启用 gzip 压缩
    compress: true,
    
    // SPA 路由支持
    historyApiFallback: true,
    
    // 代理配置
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },
    
    // 客户端日志级别
    client: {
      logging: 'info',
      overlay: {
        errors: true,
        warnings: false
      }
    }
  }
}

---

热模块替换（HMR）

HMR 允许在运行时更新模块，而不需要完全刷新页面。

启用 HMR

const webpack = require('webpack')
 
module.exports = {
  devServer: {
    hot: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
}

React HMR

npm install --save-dev @pmmmwh/react-refresh-webpack-plugin

const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
 
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            plugins: [
              'react-refresh/babel'
            ]
          }
        }
      }
    ]
  },
  plugins: [
    new ReactRefreshWebpackPlugin()
  ]
}

Vue HMR

Vue Loader 自动支持 HMR，无需额外配置。

---

Source Map 配置

Source Map 帮助我们在浏览器中调试原始源代码。

配置选项

module.exports = {
  devtool: 'eval-source-map'  // 开发环境推荐
}

Source Map 类型

类型	构建速度	重新构建速度	生产环境	品质
eval	快	最快	否	转换后的代码
eval-source-map	慢	快	否	原始源代码
cheap-eval-source-map	中等	快	否	转换后的代码（行）
cheap-module-eval-source-map	慢	快	否	原始源代码（行）
source-map	最慢	慢	是	原始源代码
hidden-source-map	最慢	慢	是	原始源代码（不引用）

推荐配置

// 开发环境
module.exports = {
  devtool: 'eval-source-map'
}
 
// 生产环境
module.exports = {
  devtool: 'source-map'  // 或 'hidden-source-map'
}

---

代理配置

开发时，通常需要将 API 请求代理到后端服务器。

基础代理

module.exports = {
  devServer: {
    proxy: {
      '/api': 'http://localhost:8080'
    }
  }
}

高级代理

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        },
        secure: false,
        logLevel: 'debug'
      }
    }
  }
}

---

开发环境优化

1. 减少构建时间

module.exports = {
  // 使用缓存
  cache: {
    type: 'filesystem'
  },
  
  // 减少解析范围
  resolve: {
    modules: [path.resolve(__dirname, 'src'), 'node_modules']
  },
  
  // 排除不必要的处理
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  }
}

2. 优化输出信息

module.exports = {
  stats: {
    colors: true,
    modules: false,
    children: false,
    chunks: false,
    chunkModules: false
  }
}

---

完整开发环境配置示例

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
 
module.exports = {
  mode: 'development',
  
  entry: './src/index.js',
  
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  
  devtool: 'eval-source-map',
  
  devServer: {
    static: {
      directory: path.join(__dirname, 'public')
    },
    port: 3000,
    hot: true,
    open: true,
    compress: true,
    historyApiFallback: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  },
  
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    }),
    new webpack.HotModuleReplacementPlugin()
  ]
}

---

总结

• DevServer：提供开发服务器和热更新
• HMR：提升开发体验，无需刷新页面
• Source Map：方便调试原始代码
• 代理：解决跨域问题
• 优化：减少构建时间，提升开发效率

---

下一步

• 生产环境优化 - 学习生产环境配置
• 实战项目：从零搭建 React 项目 - 实践开发环境配置

---

Webpack 开发环境 DevServer HMR SourceMap