开发环境与生产环境配置分离

为什么需要分离开发与生产环境配置

开发环境和生产环境的需求差异很大。开发环境需要热更新、source map、错误提示等提升开发效率的功能；生产环境则更关注代码压缩、性能优化、缓存策略等。混合配置会导致构建速度变慢，且可能泄露敏感信息。通过分离配置，可以针对不同环境优化构建流程。

Webpack配置分离的基本思路

Webpack支持通过--mode参数区分环境，但更常见的做法是创建多个配置文件。典型结构如下：

webpack.common.js  # 公共配置
webpack.dev.js    # 开发环境特有配置
webpack.prod.js   # 生产环境特有配置

使用webpack-merge工具合并配置：

// webpack.common.js
module.exports = {
  entry: './src/index.js',
  module: { /* 公共loader配置 */ },
  plugins: [ /* 公共插件 */ ]
};

// webpack.dev.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: { /* 开发服务器配置 */ }
});

环境变量管理的最佳实践

使用dotenv和webpack.DefinePlugin管理环境变量：

// 安装依赖
// npm install dotenv-webpack --save-dev

// .env.development
API_URL=http://localhost:3000
DEBUG=true

// webpack.dev.js
const Dotenv = require('dotenv-webpack');

module.exports = merge(common, {
  plugins: [
    new Dotenv({
      path: './.env.development'
    })
  ]
});

生产环境建议将敏感变量注入CI/CD环境：

// webpack.prod.js
new webpack.DefinePlugin({
  'process.env.API_URL': JSON.stringify(process.env.API_URL)
})

开发环境特有配置详解

开发环境配置的核心目标：快速迭代和调试

1. source map配置：

devtool: 'cheap-module-source-map'  // 折中方案

2. 热模块替换(HMR)：

devServer: {
  hot: true,
  liveReload: false
},
plugins: [
  new webpack.HotModuleReplacementPlugin()
]

3. CSS处理：

{
  test: /\.css$/,
  use: [
    'style-loader',  // 开发环境用style-loader
    'css-loader',
    'postcss-loader'
  ]
}

生产环境优化策略

生产构建需要极致优化：

1. 代码分割：

optimization: {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors'
      }
    }
  }
}

2. 资源压缩：

const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

optimization: {
  minimizer: [
    new TerserPlugin(),
    new CssMinimizerPlugin()
  ]
}

3. 文件指纹：

output: {
  filename: '[name].[contenthash].js',
  chunkFilename: '[name].[contenthash].chunk.js'
}

条件编译的进阶技巧

通过process.env.NODE_ENV实现条件编译：

plugins: [
  new webpack.DefinePlugin({
    __DEV__: JSON.stringify(process.env.NODE_ENV === 'development')
  })
]

在代码中使用：

if (__DEV__) {
  console.log('Debug info');
}

对于React等框架，Babel会自动移除生产环境代码：

// 这段代码在生产构建会被移除
if (process.env.NODE_ENV !== 'production') {
  validateProps(props);
}

多环境配置扩展方案

大型项目可能需要更多环境配置：

1. 测试环境配置：

// webpack.stage.js
module.exports = merge(common, {
  mode: 'production',
  devtool: 'source-map',
  output: {
    publicPath: 'https://staging.example.com/'
  }
});

2. 动态环境加载：

// build.js
const env = process.env.TARGET_ENV || 'development';
const config = require(`./webpack.${env}.js`);

3. 环境检测函数：

const isProduction = () => process.env.NODE_ENV === 'production';
const isDevelopment = () => !isProduction();

常见问题与解决方案

1. 缓存失效问题：

output: {
  filename: isProduction 
    ? '[name].[contenthash].js' 
    : '[name].js'
}

2. 开发工具泄漏：

plugins: [
  isProduction && new SomeProductionPlugin()
].filter(Boolean)

3. 环境变量安全：

// 使用gitignore排除.env文件
// 在CI中通过secret管理敏感变量

性能优化对比数据

通过配置分离可显著提升构建效率：

• 开发构建时间减少40-60%
• 生产构建体积缩小30-50%
• 热更新速度提升2-3倍

具体测试数据示例：

开发环境：
- 未分离：12s
- 分离后：7s

生产环境：
- 未分离：45s, 输出2.1MB
- 分离后：28s, 输出1.4MB

与现代前端工具的集成

1. Vue CLI集成：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config
      .plugin('define')
      .tap(args => {
        args[0]['process.env'].NODE_ENV = JSON.stringify(process.env.NODE_ENV)
        return args
      })
  }
}

2. Create React App覆盖：

// config-overrides.js
module.exports = function(webpackEnv) {
  const isEnvDevelopment = webpackEnv === 'development';
  return {
    webpack: {
      configure: (webpackConfig) => {
        // 自定义配置
        return webpackConfig;
      }
    }
  }
}

3. TypeScript环境感知：

declare const __DEV__: boolean;

if (__DEV__) {
  // 类型安全的开发环境代码
}