前端性能优化-Vue-cli 3.0项目中webpack配置

1. Vue-cli 3.0项目中webpack文件

1.1 找到解析好的webpack配置文件

有些外部工具可能需要通过一个文件访问解析好的 webpack 配置，比如那些需要提供 webpack 配置路径的 IDE 或 CLI。在这种情况下你可以使用如下路径：

/node_modules/@vue/cli-service/webpack.config.js

该文件会动态解析并输出 vue-cli-service 命令中使用的相同的 webpack 配置，包括那些来自插件甚至是你自定义的配置。

1.2 查看项目中webpack配置

因为 @vue/cli-service 对 webpack 配置进行了抽象，所以自己想理解或对webpack.config.js配置文件进行调整的时候会比较困难。

解决办法 : vue-cli-service 暴露了 inspect 命令用于审查解析好的 webpack 配置。全局的 vue 可执行程序同样提供了 inspect 命令，这个命令只是简单的把 vue-cli-service inspect 代理到了你的项目中。

vue inspect > output.js

该命令会将解析出来的 webpack 配置、包括链式访问规则和插件的提示打印到 stdout。

简单理解就是vue-cli提供了一个inspect命令,可以把webpack配置、包括链式访问规则和插件的提示打印到一个根目录下的output.js文件中,我们只需要在项目根目录下命令行中输入该命令，即可在根目录下得到output.js，该文件中即是webpack的所有配置，方便我们参考，但是仅仅是方便我们看的，我们对其进行更改不会生效。

我们还可以在命令行中查看某一项配置，如：

通过指定一个路径来审查配置的一小部分：

# 只审查第一条规则
vue inspect module.rules.0

或者指向一个规则或插件的名字：

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

你还可以列出所有规则和插件的名字：

vue inspect --rules
vue inspect --plugins

记住是在命令行中输出的。

1.3 修改webpack配置

说完webpack文件位置和如何查看webpack配置，现在该来讲讲如何修改配置了(划重点，要考的！)。

最基本的配置方式

调整 webpack 配置最简单的方式就是在 vue.config.js(项目中没有的话，在根目录下创建一个)中的 configureWebpack 选项提供一个对象：

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      //你想加的配置写在下面，以一个对象的形式写到参数里。
      //例如：new MyWebpackPlugin({template: './src/index.html'})
      //随便举的例子，实际开发请写自己需要加的配置！
      new MyAwesomeWebpackPlugin()
    ]
  }
}

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

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

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

警告⚠️

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

链式操作 (高级)

Vue CLI 内部的 webpack 配置是通过 webpack-chain 维护的。这个库提供了一个 webpack 原始配置的上层抽象，使其可以定义具名的 loader 规则和具名插件，并有机会在后期进入这些规则并对它们的选项进行修改。

它允许我们更细粒度的控制其内部配置。接下来有一些常见的在 vue.config.js 中的 chainWebpack 修改的例子。

修改 Loader 选项

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
        .loader('vue-loader')
        .tap(options => {
          // 修改它的选项...
          return options
        })
  }
}

添加一个新的 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

// 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-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-cli3.0项目的优化问题了，欢迎探讨学习哈！