Webpack 常规用法实战指南

Webpack 作为现代前端构建工具的核心，掌握其常规用法是开发高效项目的基础。本文将深入解析 Webpack 在日常开发中的四种典型配置场景，帮助开发者快速解决实际问题。

一、Loader 配置修改与扩展

1.1 默认 Loader 配置修改

Webpack 通过 Loader 处理各种文件类型，有时我们需要修改默认配置以适应项目需求。例如，处理 SVG 文件时：

chainWebpack: (config) => {
  // 修改默认 SVG Loader 排除特定目录
  config.module.rule('svg').exclude.add(path.resolve('src/icons'));
  
  // 添加自定义 SVG 处理规则
  config.module
    .rule('icons')
    .test(/\.svg$/)
    .include.add(path.resolve('src/icons'))
    .end()
    .use('svg-sprite-loader')
    .loader('svg-sprite-loader');
}

实践建议：

• 使用 chainWebpack 可以更精确地控制规则修改
• 通过 exclude 和 include 明确指定处理范围
• 链式调用结束时使用 .end() 返回上一级

1.2 常见 Loader 配置场景

二、环境变量区分构建配置

2.1 基础环境判断

configureWebpack: (config) => {
  if (process.env.NODE_ENV === 'production') {
    config.plugins.push(new CompressionPlugin());
  } else {
    config.devtool = 'eval-source-map';
  }
}

2.2 多环境配置策略

最佳实践：

1. 使用 dotenv 管理环境变量
2. 将公共配置提取为基本配置
3. 通过 webpack-merge 合并环境特定配置

三、开发服务器代理配置

3.1 基础代理设置

devServer: {
  proxy: {
    '/api': {
      target: 'http://localhost:3000',
      changeOrigin: true,
      pathRewrite: { '^/api': '' }
    }
  }
}

3.2 高级代理配置项

调试技巧：

• 使用 onProxyReq 钩子查看请求信息
• 配置 logLevel: 'debug' 查看详细代理日志
• 结合 Charles/Fiddler 抓包分析

四、多页面应用(MPA)配置

4.1 基础多页面配置

pages: {
  index: {
    entry: 'src/pages/index/main.js',
    template: 'public/index.html',
    chunks: ['chunk-vendors', 'chunk-common', 'index']
  },
  admin: {
    entry: 'src/pages/admin/main.js',
    template: 'public/admin.html',
    chunks: ['chunk-vendors', 'chunk-common', 'admin']
  }
}

4.2 动态生成多页面配置

const glob = require('glob');

const pages = {};
glob.sync('./src/pages/**/main.js').forEach(file => {
  const name = file.match(/\/pages\/(.*)\/main\.js/)[1];
  pages[name] = {
    entry: file,
    template: `public/${name}.html`
  };
});

module.exports = { pages };

性能优化建议：

1. 共享通用 chunk 减少重复代码
2. 按需加载非首屏页面资源
3. 为每个页面单独配置预加载策略

总结

Webpack 的常规配置虽然看似简单，但合理的配置能显著提升开发体验和构建效率。建议：

1. 建立配置模板库，不同项目间复用
2. 编写配置文档，记录关键决策点
3. 定期审查配置，移除无用规则
4. 保持 Webpack 版本更新，利用新特性

通过掌握这些常规用法，开发者可以解决 80% 的日常构建需求，为更高级的优化打下坚实基础。