简单的配置方式

---

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

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

• 该对象将会被webpack-merge合并入最终的webpack配置

有些 webpack 选项是基于 vue.config.js 中的值设置的，所以不能直接修改。例如你应该修改 vue.config.js 中的 outputDir 选项而不是修改 output.path；你应该修改 vue.config.js 中的 publicPath 选项而不是修改 output.publicPath。这样做是因为 vue.config.js 中的值会被用在配置里的多个地方，以确保所有的部分都能正常工作在一起。

• 若需要基于环境有条件地配置行为，或者想要直接修改配置，那就换成一个函数（该函数会在环境变量被设置之后懒执行）。该方法的第一个参数会收到已经解析好的配置。在函数内可以直接修改配置，或者返回一个将会被合并的对象

  // vue.config.js
  module.exports = {
    configureWebpack: config => {
      if (process.env.NODE_ENV === 'production') {
        // 为生产环境修改配置
      } else {
        // 为开发环境修改配置
      }
    }
  }

链式操作（高级）

---

• Vue CLI内部的webpack配置是通过webpack-chain维护的。该库提供了一个webpack原始配置的上传抽象，使其可以定义具名的loader规则和具名插件。在后期可以修改。

vue inspect对链式访问特定的loader很有帮助

修改Loader选项

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

提示

对于CSS相关loader来说，推荐使用css.loaderOptions而不是直接链式指定loader。因为每su种CSS文件类型都有多个规则，而css.loaderOptions可以确保你通过一个地方影响所有的规则。

添加一个新的Loader

  // 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()
    }
  }

替换一个规则里的Loader

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

  // 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.config.js
  module.exports = {
    chainWebpack: config => {
      config
        .plugin('html')
          .tap(args => {
            return [/* 传递给html-webpack-plugin's 构造函数的新参数*/]
          })
    }
  }

审查项目的webpack配置

• 因为@vue/cli-service对webpack配置进行了抽象，所以理解配置中包含的东西会比较困难。

• vue-cli-service暴露了inspect命令用于审查解析好的webpack配置。

  • 那个全局的vue可执行程序同样提供了inspect命令，这个命令只是简单的把vue-cli-service inspect代理到vue程序中。