Vue 中如何配置 Webpack？

推荐答案

在 Vue 项目中，可以通过 vue.config.js 文件来配置 Webpack。vue.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。以下是一个简单的配置示例：

// www.javascriptcn.com code example
module.exports = {
  configureWebpack: {
    // 自定义 Webpack 配置
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    },
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  },
  chainWebpack: config => {
    // 使用链式操作修改 Webpack 配置
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        // 修改 vue-loader 的选项
        return options;
      });
  }
};

本题详细解读

1. configureWebpack 配置

configureWebpack 是一个对象或函数，用于直接修改 Webpack 的配置。如果它是一个对象，那么它会被合并到最终的 Webpack 配置中。如果它是一个函数，它会接收当前的 Webpack 配置作为参数，并且你可以在这个函数中修改配置。

// www.javascriptcn.com code example
module.exports = {
  configureWebpack: {
    // 自定义 Webpack 配置
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    },
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  }
};

2. chainWebpack 配置

chainWebpack 是一个函数，它允许你使用链式操作来修改 Webpack 配置。这种方式更加灵活，适合需要细粒度控制的场景。

// www.javascriptcn.com code example
module.exports = {
  chainWebpack: config => {
    // 使用链式操作修改 Webpack 配置
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        // 修改 vue-loader 的选项
        return options;
      });
  }
};

3. 配置示例

假设你想为 Vue 项目添加一个别名 @，指向 src 目录，并且你想添加一个自定义的 Webpack 插件。你可以这样做：

// www.javascriptcn.com code example
const path = require('path');
const MyAwesomeWebpackPlugin = require('my-awesome-webpack-plugin');

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    },
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  },
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        // 修改 vue-loader 的选项
        return options;
      });
  }
};

通过这种方式，你可以灵活地配置 Webpack，满足项目的各种需求。