vue-cli 3.0 源码解读之 webpack4.0 篇-JavaScript中文网-JavaScript教程资源分享门户

Vue-CLI 3.0 是一个用于快速搭建 Vue.js 项目的脚手架工具，它集成了大量的工具，其中包括 Webpack 4.0。在使用 Vue-CLI 3.0 搭建项目时，Webpack 扮演着非常重要的角色。在这篇文章中，我们将深入探讨 Vue-CLI 3.0 源码中的 Webpack 4.0 相关部分，带领读者了解 Webpack 4.0 的核心概念及其在 Vue-CLI 3.0 中的应用。

Webpack 4.0 简介

Webpack 是一个打包工具，它将一个或多个 JavaScript 文件打包成一个文件。随着前端技术的不断发展，Webpack 成为了前端构建工具中的重要一员。Webpack 3.x 版本已推出一段时间，而 2018 年 2 月 Webpack 4.0 正式发布，带来了许多新的特性和优化。

Webpack 4.0 和 Webpack 3.x 相比有以下几点改进：

Webpack 4.0 增加了模块类型，原先的模块类型是 commonjs、amd、umd、es6，新增了 system 以支持 SystemJS；
Webpack 4.0 默认启用了 production 模式，该模式下会自动开启 UglifyJsPlugin 和 ModuleConcatenationPlugin，实现代码压缩和模块拼接；
Webpack 4.0 优化了构建性能，减少了大量的无用代码，实现了构建速度的提升。

通过学习 Vue-CLI 3.0 的源码，我们将更深入地了解 Webpack 4.0 的改进和应用。

Vue-CLI 3.0 中的 Webpack 配置

Vue-CLI 3.0 中的 Webpack 配置非常强大，它可以根据用户不同的需求自动生成不同的配置。Vue-CLI 3.0 的 Webpack 配置文件位于项目的 node_modules/@vue/cli-service/lib/config 目录中，其中的配置项分为三种：

vue.config.js：用户自定义配置，包括 devServer、publicPath、outputDir 等；
webpack.config.js：Webpack 配置，包括 entry、output、mode、module、plugins 等；
chainWebpack.js：一些高级配置，可以通过 API 修改 Webpack 的配置。

下面我们将逐个解析这些配置文件。

`vue.config.js`

vue.config.js 位于项目根目录下，可以通过它来自定义 Vue-CLI 3.0 的配置，例如应用的端口号、代理设置、打包输出路径等。示例代码如下：

// javascriptcn.com 代码示例
module.exports = {
  devServer: {
    port: 8085,
    proxy: {
      '/api': {
        target: 'http://localhost:8083/',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  outputDir: 'dist'
}

这段代码中的配置项 devServer 可以设置开发服务器的参数，包括 port 端口号和 proxy 代理设置，其中 proxy 代理还可以通过 pathRewrite 对路径进行重写。outputDir 是打包生成的文件路径，这里设置为 dist 目录。

`webpack.config.js`

Webpack 是 Vue-CLI 3.0 中最重要的构建工具，webpack.config.js 中存放着 Webpack 的各种配置。Webpack 的核心配置是 entry、output、module、plugins 等，我们将逐一讲解。

entry

entry 是 Webpack 构建的入口文件。在 Vue-CLI 3.0 中，entry 是通过 @vue/cli-service 中的 getServicePaths 函数来获取的，示例代码如下：

// javascriptcn.com 代码示例
const Service = require('@vue/cli-service/lib/Service')
const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())

const paths = getServicePaths(service)

function getServicePaths (service) {
  const useLegacyConfig = fs.existsSync(
    path.resolve(service.context, 'config/index.js')
  )
  const configFilePath = useLegacyConfig
    ? path.resolve(service.context, 'config/index.js')
    : path.resolve(service.context, 'vue.config.js')
  const config = require(configFilePath) || {}

  const configureWebpack = config.configureWebpack || config.config
  const chainWebpack = config.chainWebpack || config.chainableConfig

  const entry = (chainWebpack && chainWebpack.get('entry')) || configureWebpack.entry

  if (typeof entry === 'string' || Array.isArray(entry)) {
    return [path.resolve(service.context, entry)]
  }

  return Object.keys(entry).reduce((acc, key) => {
    let val = entry[key]
    if (typeof val === 'string' || Array.isArray(val)) {
      val = [val]
    }
    val.forEach((v) => {
      acc.push(path.resolve(service.context, v))
    })
    return acc
  }, [])
}

这段代码中的 getServicePaths 函数会判断用户是否使用了旧的配置（即 config/index.js 或 vue.config.js），如果用户使用了旧的配置，那么 entry 就是通过 Config 类来获取的。

output

output 是 Webpack 打包后生成的文件的路径和文件名。在 Vue-CLI 3.0 中，output 的路径和文件名都是自动生成的。示例代码如下：

module.exports = {
  outputDir: 'dist',
  assetsDir: 'static',
  filenameHashing: true,
  ...
}

这里的 outputDir 代表打包生成的文件在哪个目录下，assetsDir 代表该目录下的静态资源所在的目录，filenameHashing 表示文件名是否需要进行哈希，避免浏览器缓存问题。

module

module 是处理项目中的各种文件类型的规则，例如处理 CSS 时使用的 css-loader 和 style-loader，以及处理 ES6 语法的 babel-loader。在 Vue-CLI 3.0 中，module 配置项是通过 @vue/cli-service 中的 resolveModule 函数获取的，示例代码如下：

const Service = require('@vue/cli-service/lib/Service')
const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())

const options = service.resolveWebpackConfig()

module.exports = options.module

这段代码中的 resolveWebpackConfig 函数会读取根目录下的 vue.config.js 文件和 @vue/cli-service 中的内置配置，根据这些配置生成 Webpack 配置。

plugins

plugins 是 Webpack 中的插件，用于增强 Webpack 的功能。在 Vue-CLI 3.0 中，插件也是通过 @vue/cli-service 中的 resolveWebpackConfig 函数获取的，示例代码如下：

const Service = require('@vue/cli-service/lib/Service')
const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd())

const options = service.resolveWebpackConfig()

module.exports = options.plugins

这段代码中的 options.plugins 返回的是一个数组，包含了 Webpack 配置中所用到的所有插件。常用的插件有 html-webpack-plugin、copy-webpack-plugin、uglifyjs-webpack-plugin 等。

`chainWebpack.js`

Vue-CLI 3.0 中的 Webpack 配置项非常强大，但有时候我们需要更加高级的配置，此时就需要使用 chainWebpack.js 了。chainWebpack.js 中包含了一些高级的配置项，例如优化打包后的文件大小和性能、优化异步加载模块的方式等。

示例代码如下：

// javascriptcn.com 代码示例
module.exports = (config) => {
  config.plugins.delete('hmr')
  config.optimization.splitChunks.name = 'vendor'
  config.module.rule('vue')
    .use('vue-loader')
    .tap(options => {
      options.compilerOptions.whitespace = 'condense'
    })
}

这段代码中的配置项有三个。第一个配置删除了 hmr 插件，即 HMR（Holt Module Replacement）模块热更新插件；第二个配置将 splitChunks 插件中的 chunk 名称重命名为 vendor；第三个配置修改了规则，将 vue-loader 的选项中的 whitespace 修改为 condense。这些配置项可以通过 config 参数来修改。

总结

Vue-CLI 3.0 是一个非常强大的脚手架工具，其中集成了 Webpack 4.0。Webpack 4.0 性能优化和改进实现了更快的打包构建和更好的代码压缩。在 Vue-CLI 3.0 的配置中，vue.config.js、webpack.config.js 和 chainWebpack.js 都有着非常重要的作用。通过对这些配置的深入解读，我们可以更好地了解 Webpack 4.0 的核心概念及其在 Vue-CLI 3.0 中的应用。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6534dbbc7d4982a6eba401eb