vuecli中chainWebpack的常用操作举例

下面是详细讲解"vuecli中chainWebpack的常用操作举例"的攻略：

什么是chainWebpack

在使用VueCLI创建的项目中，除了可以使用默认的配置之外，还可以自定义Webpack的一些配置。在Webpack的配置文件中，有一个configureWebpack选项，可以直接添加和修改Webpack的配置。而chainWebpack操作提供了更加细粒度的控制方式。chainWebpack允许我们对Webpack的配置进行链式操作，非常灵活。

常用操作举例

以下是chainWebpack中常用的几种操作及示例：

添加loader

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('示例')
      .test(/\.示例$/)
      .use('示例-loader')
      .loader('示例-loader')
      .end();
  }
}

在上面的代码中，我们添加了一个loader，并命名为“示例-loader”。首先，在module.rules数组中添加了一项符合要求的rule（test是用于匹配文件的正则表达式）。然后，我们调用use方法，并传入loader的名称，最后调用loader方法加载loader。

修改plugin

module.exports = {
  chainWebpack: config => {
    config
      .plugin('示例')
      .use('示例插件')
      .tap(args => {
        // 对配置进行修改
        args[0].example = true;
        return args;
      })
  }
}

在上面的代码中，我们对一个已有的plugin进行修改。首先，我们调用plugin方法，传入需要修改的plugin的名称。然后，我们调用use方法，加载该plugin。最后，调用tap方法，并接收一个函数作为参数，在函数中可以修改该plugin的配置。在示例中，我们给plugin新增了一个example属性，值为true。

总结

从上面的示例中可以看出，chainWebpack提供了很多灵活、可操作性非常高的API。这些API可以帮助我们定制化的修改和重置VueCLI中默认的Webpack配置。当我们遇到需要自定义Webpack的情况时，可以运用chainWebpack提供的方法，对Webpack进行细粒度的控制。