Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，通常根据文档进行简单配置就能运行起来, 但是我们如果想定制化一些场景时，往往会出现一个难点就是，我们知道在webpack.config.js中如何修改配置，但是我们却不知道如何改写成vue.config.js中的有效代码；归根结底还是vue-cli官方文档写的太......

步骤

揪出vue-cli中最终生成的webpack配置
根据webpack配置的注释提示反向推理出vue.config.js中的写法
审查项目的 webpack 配置是否生效

一、揪出vue-cli中最终生成的webpack配置参考链接

在项目根目录打开终端

js 复制代码

vue inspect > webpack.config.js

等待命令执行完成后，在项目根目录下会生成一个名为webpack.config.js的文件，其中包含了默认的webpack配置。
如果你只对特定的配置感兴趣，可以在vue inspect命令后面添加相应的参数，例如vue inspect module.rules将只输出关于模块规则的配置信息。

二、根据webpack配置的注释提示反向推理出vue.config.js中的写法

1. 修改loader配置

比方我将css内联到html中后，发现里面的文件路径全部是../,导致项目运行时图片均找不到；

为此在第一步生成的webpack.config.js中，我查找css打包相关以及publicPath为'../'的，找到如下

当然其实搜索css相关&&../的不止这一处，作为小白猜测最高概率的一个个试呗！

看上述圈红的注释，很easy的摸索出反向修改的方式查看vue-cli中链式调用的写法 vue.config.js中修改如下

js 复制代码

module.export = {
    // ...
    chainWebpack: (config) => {
        config.module.rule('stylus').oneOf('vue').use('extract-css-loader')
        .tap(options => {
            options.publicPath = './'
            return options
        })
    }
}

审查项目的 webpack 配置

再次执行vue inspect > webpack.config.js查找config.module.rule('stylus').oneOf('vue').use('extract-css-loader')

可以看到已经生效；项目再次执行打包命令如npm run build；审查产物中的路径是否变化

扩展

1. 新增一个loader

js 复制代码

// vue.config.js
module.exports = {
  chainWebpack: config => {
    // GraphQL Loader
    config.module
      .rule('graphql')
      .test(/.graphql$/)
      .use('graphql-tag/loader')
        .loader('graphql-tag/loader')
        .end()
      // 你还可以再添加一个 loader
      .use('other-loader')
        .loader('other-loader')
        .end()
  }
}

2. 替换一个规则里的 Loader

如果你想要替换一个已有的基础 loader，例如为内联的 SVG 文件使用 vue-svg-loader 而不是加载这个文件：

arduino 复制代码

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

    // 清除已有的所有 loader。
    // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
    svgRule.uses.clear()

    // 添加要替换的 loader
    svgRule
      .use('vue-svg-loader')
        .loader('vue-svg-loader')
  }
}

修改插件配置

修改插件配置，使用vue-cli中的configureWebpack函数，当然也可以继续使用chainWebpack, 因为两者都能拿到整个webpack配置，可以进行修改

Type: Object | Function

如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。

如果这个值是一个函数，则会接收被解析的配置作为参数。该函数既可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。

比如

js 复制代码

module.exports = {
  configureWebpack: config => {
    config.stats = "minimal";
    config.module.rules.push(
      {
        test: /banners\/[\w$\/]+\/main\.js$/,
        use: ["./src/plugins/release.loader.js", "./src/plugins/hoc.loader.js"],
        exclude: path.resolve(__dirname, '../node_modules')
      },
    );
    config.plugins.push(...optimizationPlugins)
  }
}

知识点细节补充站

1. configureWebpack和chainWebpack区别和联系

configureWebpack和chainWebpack都是用于修改webpack配置的函数，但它们有一些区别和联系。

区别：
- configureWebpack是一个简单的函数，它接受一个对象作为参数，该对象包含了要修改的webpack配置。你可以直接在该对象中添加、修改或删除webpack配置的属性。这种方式更直接，但也更有限制，因为你只能直接修改配置对象中的属性。
- chainWebpack是一个函数，它接受一个config参数，该参数是一个基于webpack-chain库创建的链式操作对象。通过调用该对象上的方法，你可以以链式的方式修改webpack配置。这种方式更灵活，因为你可以使用链式调用来修改配置的不同部分，如入口、输出、模块规则等。
联系：
- 两者都是在vue-cli或webpack配置文件中用于修改webpack配置的函数。
- 你可以使用configureWebpack或chainWebpack中的任何一个来修改webpack配置，或者两者结合使用，根据你的需求选择合适的方式。
- 在vue-cli项目中，configureWebpack通常用于修改简单的webpack配置，而chainWebpack通常用于更复杂的配置修改，因为它提供了更灵活的方式来操作配置。

总的来说，configureWebpack和chainWebpack都是用于修改webpack配置的函数，它们在使用方式和灵活性上有所不同，可以根据具体的需求选择合适的方式来修改配置。

2. tap函数

在webpack配置中，可以使用chainWebpack函数来修改webpack的配置。chainWebpack函数接受一个config参数，它代表了webpack的配置对象。通过调用config对象上的方法，可以对配置进行修改。

在给定的代码中，config.module.rule('media')表示选择名为'media'的规则。然后，使用use('url-loader')方法选择名为'url-loader'的loader。最后，使用tap()方法来修改这个loader的选项。

在tap()方法的回调函数中，options参数表示该loader的选项对象。通过修改options对象的属性，可以修改loader的配置。在这个例子中，通过设置options.publicPath为./，将extract-css-loader的publicPath选项设置为./。

小白如何快速学会修改vue-cli中的webpack配置并检验是否生效？

步骤

一、揪出vue-cli中最终生成的webpack配置参考链接

二、根据webpack配置的注释提示反向推理出vue.config.js中的写法

1. 修改loader配置

审查项目的 webpack 配置

扩展

1. 新增一个loader

2. 替换一个规则里的 Loader

修改插件配置

知识点细节补充站

1. configureWebpack和chainWebpack区别和联系

2. tap函数