⚠️ Vue CLI 处于维护模式！

对于新项目，现在建议使用 create-vue 来搭建基于 Vite 的项目。还可以参考 Vue 3 工具指南获取最新的建议。

使用 Webpack

简单配置

调整 webpack 配置的最简单方法是在 vue.config.js 中的 configureWebpack 选项中提供一个对象。

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  }
}

该对象将使用 webpack-merge 合并到最终的 webpack 配置中。

警告

某些 webpack 选项是根据 vue.config.js 中的值设置的，不应直接修改。例如，不要修改 output.path，而应该使用 vue.config.js 中的 outputDir 选项；不要修改 output.publicPath，而应该使用 vue.config.js 中的 publicPath 选项。这是因为 vue.config.js 中的值将在配置中的多个地方使用，以确保所有内容都能正常协同工作。

如果需要根据环境进行条件行为，或者想要直接修改配置，请使用函数（该函数将在设置环境变量后进行延迟评估）。该函数接收解析后的配置作为参数。在函数内部，您可以直接修改配置，也可以返回一个将被合并的对象。

// vue.config.js
module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // mutate config for production...
    } else {
      // mutate for development...
    }
  }
}

链式操作（高级）

内部 webpack 配置使用 webpack-chain 进行维护。该库提供了对原始 webpack 配置的抽象，能够定义命名加载器规则和命名插件，并在以后“tap”到这些规则并修改其选项。

这使我们能够更细粒度地控制内部配置。下面您将看到一些通过 vue.config.js 中的 chainWebpack 选项进行的常见修改示例。

提示

vue inspect 在您尝试通过链式操作访问特定加载器时将非常有用。

修改加载器的选项

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
        .tap(options => {
          // modify the options...
          return options
        })
  }
}

提示

对于与 CSS 相关的加载器，建议使用 css.loaderOptions 而不是直接通过链式操作来定位加载器。这是因为每个 CSS 文件类型都有多个规则，而 css.loaderOptions 确保您可以在一个地方影响所有规则。

添加新的加载器

// vue.config.js
module.exports = {
  chainWebpack: config => {
    // GraphQL Loader
    config.module
      .rule('graphql')
      .test(/\.graphql$/)
      .use('graphql-tag/loader')
        .loader('graphql-tag/loader')
        .end()
      // Add another loader
      .use('other-loader')
        .loader('other-loader')
        .end()
  }
}

替换规则的加载器

如果您想替换现有的基本加载器，例如使用 vue-svg-loader 内联 SVG 文件而不是加载文件

// vue.config.js
module.exports = {
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')

    // clear all existing loaders.
    // if you don't do this, the loader below will be appended to
    // existing loaders of the rule.
    svgRule.uses.clear()

    // add replacement loader(s)
    svgRule
      .use('vue-svg-loader')
        .loader('vue-svg-loader')
  }
}

修改插件的选项

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        return [/* new args to pass to html-webpack-plugin's constructor */]
      })
  }
}

您需要熟悉 webpack-chain 的 API 以及阅读一些源代码才能了解如何利用此选项的全部功能，但它提供了一种比直接修改值更具表现力和更安全的方式来修改 webpack 配置。

例如，假设您想将 index.html 的默认位置从 /Users/username/proj/public/index.html 更改为 /Users/username/proj/app/templates/index.html。通过参考 html-webpack-plugin，您可以看到可以传入的选项列表。要更改模板路径，可以使用以下配置传入新的模板路径。

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        args[0].template = '/Users/username/proj/app/templates/index.html'
        return args
      })
  }
}

您可以通过使用 vue inspect 实用程序检查 vue webpack 配置来确认此更改已生效，我们将在下面讨论。

检查项目的 Webpack 配置

由于 @vue/cli-service 对 webpack 配置进行了抽象，因此可能难以理解配置中包含的内容，尤其是在您尝试自己进行调整时。

vue-cli-service 公开了 inspect 命令用于检查解析后的 webpack 配置。全局 vue 二进制文件也提供了 inspect 命令，它只是代理到项目中的 vue-cli-service inspect。

该命令将解析后的 webpack 配置打印到标准输出，其中还包含有关如何通过链式操作访问规则和插件的提示。

您可以将输出重定向到文件以方便检查。

vue inspect > output.js

默认情况下，inspect 命令将显示开发配置的输出。要查看生产配置，您需要运行

vue inspect --mode production > output.prod.js

请注意，输出不是有效的 webpack 配置文件，它是一种仅用于检查的序列化格式。

您还可以通过指定路径来检查配置的子集。

# only inspect the first rule
vue inspect module.rules.0

或者，定位命名规则或插件。

vue inspect --rule vue
vue inspect --plugin html

最后，您可以列出所有命名规则和插件。

vue inspect --rules
vue inspect --plugins

将解析后的配置用作文件

某些外部工具可能需要以文件形式访问解析后的 webpack 配置，例如 IDE 或期望 webpack 配置路径的命令行工具。在这种情况下，您可以使用以下路径。

<projectRoot>/node_modules/@vue/cli-service/webpack.config.js

此文件动态解析并导出与 vue-cli-service 命令中使用的完全相同的 webpack 配置，包括来自插件的配置，甚至包括您自定义的配置。

使用 CSS

模式和环境变量

使用 Webpack #

简单配置 #

链式操作（高级） #

修改加载器的选项 #

添加新的加载器 #

替换规则的加载器 #

修改插件的选项 #

检查项目的 Webpack 配置 #

将解析后的配置用作文件 #