Webpack配置詳解

當前配置分析

1. 開(kāi)發(fā)環(huán)境配置 (webpack.config.dev.js)

• 入口配置: 包含polyfills、熱更新客戶(hù)端和主應用入口
• 輸出配置: 虛擬路徑，開(kāi)發(fā)服務(wù)器內存中運行
• 模塊解析: 支持JSX、Web模塊等擴展名
• 加載器配置:
  • Babel處理JS/JSX文件
  • CSS/LESS處理，支持Ant Design主題定制
  • 圖片和字體文件處理

2. 生產(chǎn)環(huán)境配置 (webpack.config.prod.js)

• 代碼壓縮: 使用UglifyJS進(jìn)行代碼壓縮
• CSS提取: 將CSS提取到獨立文件
• 資源優(yōu)化: 文件名添加hash用于緩存控制
• Service Worker: 生成服務(wù)工作者腳本

跨域配置補充

1. 開(kāi)發(fā)環(huán)境跨域配置

當前項目使用 http-proxy-middleware 進(jìn)行代理配置，但配置不夠完善。需要補充完整的跨域配置：

// config/proxy.js - 完善后的配置
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://192.168.1.23:9090',
      changeOrigin: true,
      secure: false,
      ws: true,
      pathRewrite: {
        '^/api': '/api'
      },
      onProxyReq: (proxyReq, req, res) => {
        console.log('代理請求:', req.method, req.url);
      },
      onError: (err, req, res) => {
        console.error('代理錯誤:', err);
        res.writeHead(500, {
          'Content-Type': 'text/plain'
        });
        res.end('代理服務(wù)器錯誤');
      }
    })
  );
  
  // 多個(gè)API代理配置
  app.use(
    '/tms',
    createProxyMiddleware({
      target: 'http://192.168.1.23:9090',
      changeOrigin: true,
      pathRewrite: {
        '^/tms': '/tms'
      }
    })
  );
};

2. Webpack Dev Server跨域配置

在 webpackDevServer.config.js 中補充跨域配置：

module.exports = function(proxy, allowedHost) {
  return {
    // 現有配置...
    
    // 添加跨域配置
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': '*',
      'Access-Control-Allow-Headers': '*',
    },
    
    // 代理配置
    proxy: {
      '/api': {
        target: 'http://192.168.1.23:9090',
        changeOrigin: true,
        secure: false,
        logLevel: 'debug'
      }
    }
  };
};

性能優(yōu)化配置

1. 代碼分割優(yōu)化

// webpack.config.prod.js 中添加代碼分割
optimization: {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all',
      },
      common: {
        name: 'common',
        minChunks: 2,
        chunks: 'all',
        enforce: true
      }
    }
  },
  runtimeChunk: {
    name: 'manifest'
  }
}

2. 打包優(yōu)化配置

// 生產(chǎn)環(huán)境打包優(yōu)化
module.exports = {
  // 啟用持久化緩存
  cache: {
    type: 'filesystem',
    buildDependencies: {
      config: [__filename]
    }
  },
  
  // 優(yōu)化配置
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        parallel: true,
        terserOptions: {
          compress: {
            drop_console: true, // 生產(chǎn)環(huán)境移除console
          },
        },
      }),
    ],
    // 模塊ID優(yōu)化
    moduleIds: 'deterministic',
    chunkIds: 'deterministic'
  }
};

3. 資源壓縮優(yōu)化

// 添加資源壓縮插件
const CompressionPlugin = require('compression-webpack-plugin');

plugins: [
  // 現有插件...
  new CompressionPlugin({
    algorithm: 'gzip',
    test: /\.(js|css|html|svg)$/,
    threshold: 8192,
    minRatio: 0.8
  })
]

部署配置優(yōu)化

1. 多環(huán)境部署配置

// config/env.js - 環(huán)境變量配置
const fs = require('fs');
const path = require('path');
const NODE_ENV = process.env.NODE_ENV;

// 環(huán)境配置文件路徑
const dotenvFiles = [
  `${path.join(__dirname, '../.env')}`,
  `${path.join(__dirname, '../.env.local')}`,
  `${path.join(__dirname, '../.env.${NODE_ENV}')}`,
  `${path.join(__dirname, '../.env.${NODE_ENV}.local')}`,
].filter(Boolean);

// 加載環(huán)境變量
dotenvFiles.forEach(dotenvFile => {
  if (fs.existsSync(dotenvFile)) {
    require('dotenv-expand')(
      require('dotenv').config({
        path: dotenvFile,
      })
    );
  }
});

// 公共路徑配置
const publicPath = process.env.PUBLIC_PATH || '/';

module.exports = (publicUrl) => {
  const raw = {
    NODE_ENV: process.env.NODE_ENV || 'development',
    PUBLIC_URL: publicUrl,
    REACT_APP_API_URL: process.env.REACT_APP_API_URL,
    REACT_APP_VERSION: process.env.npm_package_version,
  };

  // 字符串化環(huán)境變量
  const stringified = {
    'process.env': Object.keys(raw).reduce((env, key) => {
      env[key] = JSON.stringify(raw[key]);
      return env;
    }, {}),
  };

  return { raw, stringified };
};

2. CDN部署配置

// webpack.config.prod.js - CDN配置
output: {
  path: paths.appBuild,
  filename: 'static/js/[name].[contenthash:8].js',
  chunkFilename: 'static/js/[name].[contenthash:8].chunk.js',
  publicPath: process.env.CDN_URL || '/',
  crossOriginLoading: 'anonymous'
},

3. 部署腳本配置

// package.json 添加部署腳本
{
  "scripts": {
    "build:dev": "cross-env NODE_ENV=development REACT_APP_API_URL=http://dev-api.example.com npm run build",
    "build:test": "cross-env NODE_ENV=test REACT_APP_API_URL=http://test-api.example.com npm run build",
    "build:prod": "cross-env NODE_ENV=production REACT_APP_API_URL=https://api.example.com npm run build",
    "deploy:dev": "npm run build:dev && deploy-cli --env dev",
    "deploy:prod": "npm run build:prod && deploy-cli --env prod"
  }
}

監控和分析配置

1. 打包分析配置

// 打包分析工具配置
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

// 只在分析時(shí)啟用
if (process.env.ANALYZE) {
  plugins.push(new BundleAnalyzerPlugin());
}

2. 性能監控配置

// 性能監控
performance: {
  maxAssetSize: 250000,
  maxEntrypointSize: 250000,
  hints: 'warning',
  assetFilter: function(assetFilename) {
    return !assetFilename.endsWith('.map');
  }
}

最佳實(shí)踐建議

1. 開(kāi)發(fā)環(huán)境優(yōu)化

• 啟用熱更新提高開(kāi)發(fā)效率
• 配置source map便于調試
• 設置合適的緩存策略

2. 生產(chǎn)環(huán)境優(yōu)化

• 啟用代碼壓縮和混淆
• 配置合理的緩存策略
• 啟用Gzip壓縮
• 使用CDN加速靜態(tài)資源

3. 安全配置

• 避免暴露敏感信息
• 配置CSP安全策略
• 啟用HTTPS

通過(guò)以上配置優(yōu)化，可以顯著(zhù)提升項目的開(kāi)發(fā)體驗、打包性能和部署效率。