Webpack 核心配置与优化实战指南

一、Webpack 核心配置解析

1. 基础路径配置

publicPath 是 Webpack 最重要的配置之一，它决定了应用资源的基础访问路径：

module.exports = {
  output: {
    publicPath: process.env.NODE_ENV === 'production' 
      ? 'https://cdn.example.com/assets/' 
      : '/'
  }
}

实践建议：

• 开发环境通常设为 /
• 生产环境根据部署位置设置（CDN 或子目录）
• 动态设置时结合环境变量更灵活

2. 输出目录配置

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'), // 输出目录
    filename: '[name].[contenthash:8].js'  // 文件名模板
  }
}

文件名占位符说明：

• [name]: 入口名称
• [hash]: 构建哈希
• [chunkhash]: 文件内容哈希
• [contenthash]: 最佳缓存策略选择

3. 模块解析规则

module.exports = {
  resolve: {
    extensions: ['.js', '.vue', '.json'], // 自动解析的扩展名
    alias: {
      '@': path.resolve('src'), // 路径别名
      'components': path.resolve('src/components')
    }
  }
}

二、高级配置技巧

1. 环境区分配置

// webpack.config.js
module.exports = (env, argv) => {
  const isProduction = argv.mode === 'production';
  
  return {
    devtool: isProduction ? 'source-map' : 'cheap-module-eval-source-map',
    plugins: [
      isProduction && new CleanWebpackPlugin()
    ].filter(Boolean)
  };
};

2. 性能优化配置

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        common: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    },
    runtimeChunk: 'single'
  }
}

优化建议：

• 大型项目使用 splitChunks 拆分代码
• 提取 runtime 代码到单独文件
• 生产环境开启 TerserPlugin 压缩

3. 自定义 Loader 配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        oneOf: [
          {
            resourceQuery: /inline/,
            use: ['vue-svg-loader']
          },
          {
            use: ['file-loader']
          }
        ]
      }
    ]
  }
}

三、开发服务器配置

1. 基础开发服务器

module.exports = {
  devServer: {
    hot: true, // 开启热更新
    open: true, // 自动打开浏览器
    port: 8080,
    historyApiFallback: true // 支持 HTML5 History API
  }
}

2. 代理配置示例

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://backend:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        },
        onProxyReq(proxyReq) {
          console.log(`Proxying request to: ${proxyReq.path}`);
        }
      }
    }
  }
}

四、性能优化实战

1. 构建速度优化

// 使用缓存和并行处理
module.exports = {
  cache: {
    type: 'filesystem',
    buildDependencies: {
      config: [__filename]
    }
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'thread-loader',
            options: {
              workers: require('os').cpus().length - 1
            }
          },
          'babel-loader'
        ]
      }
    ]
  }
}

2. 打包体积优化

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      openAnalyzer: false
    })
  ],
  externals: {
    lodash: '_',
    jquery: 'jQuery'
  }
}

五、最佳实践总结

1. 配置组织建议：

   • 基础配置 webpack.common.js
   • 开发配置 webpack.dev.js
   • 生产配置 webpack.prod.js
   • 使用 webpack-merge 合并配置

2. 性能检查工具：

   # 分析构建速度
   npx webpack --profile --json > stats.json
   # 使用 webpack-bundle-analyzer 分析包内容

3. 长期缓存策略：

   • 使用 contenthash 命名文件
   • 提取第三方库到单独 chunk
   • 保持 module.id 稳定

4. 现代浏览器优化：

   module.exports = {
     output: {
       filename: '[name].legacy.js',
     },
     plugins: [
       new HtmlWebpackPlugin({
         inject: false,
         templateParameters: {
           modernBundle: '[name].modern.js'
         }
       })
     ]
   }

通过合理配置 Webpack，可以显著提升前端项目的开发体验和运行性能。建议根据项目规模选择合适的优化策略，并定期检查构建指标进行持续优化。