chainWebpack是什么

chainWebpack(config) 是什么？

chainWebpack 是 Vue CLI 和 Webpack 提供的一个高级配置方法，允许你通过 链式 API（webpack-chain） 更精细地修改 Webpack 的配置。它比直接修改 webpack.config.js 更灵活，特别适合在 Vue CLI 创建的项目中自定义构建流程。

1. 基本作用

• 修改 Webpack 配置：可以添加、修改或删除 loader、plugin、入口、输出等。
• 链式调用：使用 webpack-chain 语法，比原生 Webpack 配置更易读。
• 条件配置：可以根据环境（development/production）动态调整配置。

2. 使用场景

chainWebpack 通常用于：

1. 添加新的 loader 或 plugin（如 svg-sprite-loader）
2. 修改已有 loader 的配置（如 vue-loader、babel-loader）
3. 调整优化选项（如代码分割 splitChunks）
4. 自定义 Source Map 策略（如 devtool）
5. 扩展或覆盖 Vue CLI 的默认 Webpack 配置

3. 基本语法

在 vue.config.js 中使用：

module.exports = {
  chainWebpack: (config) => {
    // 在这里修改 Webpack 配置
    config.module
      .rule('svg') // 修改 svg 规则
      .exclude.add(resolve('src/icons')) // 排除 src/icons 目录
      .end();
  },
};

4. 常见配置示例

(1) 修改 loader 配置

chainWebpack: (config) => {
  // 修改 vue-loader 配置
  config.module
    .rule('vue')
    .use('vue-loader')
    .tap((options) => {
      options.compilerOptions.preserveWhitespace = true; // 保留模板中的空格
      return options;
    });
},

(2) 添加新的 loader

chainWebpack: (config) => {
  // 添加 svg-sprite-loader 处理 icons
  config.module
    .rule('icons')
    .test(/\.svg$/)
    .include.add(resolve('src/icons'))
    .end()
    .use('svg-sprite-loader')
    .loader('svg-sprite-loader')
    .options({ symbolId: 'icon-[name]' });
},

(3) 根据环境动态配置

chainWebpack: (config) => {
  // 开发环境启用 cheap-source-map
  config.when(process.env.NODE_ENV === 'development', (config) => {
    config.devtool('cheap-source-map');
  });

  // 生产环境关闭 source map
  config.when(process.env.NODE_ENV === 'production', (config) => {
    config.devtool('none');
  });
},

(4) 修改插件配置

chainWebpack: (config) => {
  // 修改 HtmlWebpackPlugin 的标题
  config.plugin('html').tap((args) => {
    args[0].title = 'My Custom App';
    return args;
  });
},

5. webpack-chain 核心概念

chainWebpack 使用的是 webpack-chain 提供的 API，主要方法包括：

6. 与 configureWebpack 的区别

Vue CLI 提供了两种 Webpack 配置方式：

推荐优先使用 chainWebpack，因为它更清晰且不易冲突。

7. 总结

• chainWebpack 是 Vue CLI 提供的 Webpack 高级配置方式，使用 webpack-chain 语法。
• 适合修改 loader、plugin、优化选项等，比直接改 webpack.config.js 更安全。
• 支持链式调用和条件配置，灵活性高。
• 在 vue.config.js 中使用，是 Vue 项目构建定制的核心方法之一。

典型使用场景

// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    // 1. 修改 loader
    config.module.rule('vue').use('vue-loader').tap(...);

    // 2. 添加新 loader
    config.module.rule('icons').test(/\.svg$/).use('svg-sprite-loader')...;

    // 3. 动态配置不同环境
    config.when(process.env.NODE_ENV === 'development', ...);
  },
};

如果你需要对 Webpack 进行深度定制，chainWebpack 是最推荐的方式！