解析vue.config.js文件

一、用途

创建 Vue 项目时，默认情况下是没有 vue.config.js 文件的。Vue CLI 会提供一组默认的配置，用于构建和开发项目，这些配置在内部被封装好了，并不需要用户手动创建 vue.config.js 文件来进行配置。通过在项目根目录下创建 vue.config.js 文件，你可以自定义 Vue CLI 的默认配置，从而满足项目特定的需求。

一些常见的用途包括：

1、自定义 webpack 配置：

可以通过 vue.config.js 文件来修改 Vue CLI 默认的 webpack 配置，例如添加额外的 loader 或 plugin、调整 webpack 的 entry、output 等选项。

2、配置开发服务器：

在 vue.config.js 中配置开发服务器的选项，例如端口号、代理设置、HTTPS 配置等。

3、配置公共资源路径：

可以指定构建后静态资源的公共路径，比如部署到子路径或 CDN 上时的路径设置。

4、配置环境变量：

可以在 vue.config.js 中设置环境变量，用于在项目中访问和区分不同的环境，比如开发环境、测试环境和生产环境。

5、配置插件：

可以配置 Vue CLI 插件，通过在 vue.config.js 文件中进行相应的设置和调整。

6、配置CSS：

可以配置 CSS 相关的选项，例如启用 CSS modules、使用 PostCSS 插件等。

7、配置Babel：

可以配置 Babel 相关的选项，例如添加额外的 Babel 插件或预设。

二、常见的配置项及其功能说明

javascript 复制代码

module.exports = {
  // 配置开发服务器
  devServer: {
    // 指定开发服务器的主机名，默认为 localhost
    host: 'localhost',
    // 指定开发服务器的端口号，默认为 8080
    port: 8080,
    // 启用 HTTPS，默认为 false
    https: false,
    // 配置开发服务器的代理
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  // 配置公共路径
  publicPath: '/',
  // 是否在构建时生成 source map，默认为 false
  productionSourceMap: false,
  // 配置 CSS
  css: {
    // 启用 CSS modules
    requireModuleExtension: true,
    // 是否使用 CSS 预处理器 loader
    loaderOptions: {
      sass: {
        prependData: `@import "@/styles/variables.scss";`
      }
    }
  },
  // 配置 Babel
  transpileDependencies: [
    /* string or regex */
  ],
  // 配置插件
  pluginOptions: {
    // ...
  },
  // 配置 webpack
  configureWebpack: {
    // ...
  },
  // 配置 Webpack Dev Server 的选项
  devServer: {
    // ...
  }
};

三、实践案例

javascript 复制代码

'use strict'
const path = require('path')
// 辅助函数 resolve，它接受一个路径参数 dir，并返回该路径相对于当前文件所在目录的绝对路径
function resolve (dir) {
  return path.join(__dirname, dir)
}
// 引入了用于压缩文件的 webpack 插件 compression-webpack-plugin，它能够在打包时对文件进行 gzip 压缩
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// 定义了一个变量 IS_PROD，它根据当前环境变量 NODE_ENV 的值来判断是否为生产环境
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
// 正则表达式，用于匹配需要进行 gzip 压缩的文件类型
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i
// 导出了整个配置对象，使其可以被 webpack 使用
module.exports = {
  publicPath: './',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,
  css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      sass: {
        // 所以这里假设你有 `src/variables.scss` 这个文件
        data: '@import "@/assets/css/variables.scss";'
      }
    }
  },
  configureWebpack: config => {
  	// 定义一个空数组，用于存放Webpack插件
    const plugins = []
    // 如果是生产环境，添加以下插件配置
    if (IS_PROD) {
      plugins.push(
        new CompressionWebpackPlugin({ // 使用CompressionWebpackPlugin插件进行gzip压缩
          filename: '[path].gz[query]', // 指定压缩后文件的名称格式
          algorithm: 'gzip', // 指定压缩算法为gzip
          test: productionGzipExtensions, // 指定要压缩的文件类型
          threshold: 10240, // 只有文件大小大于10KB才会被压缩
          minRatio: 0.8 // 只有压缩率达到0.8以上的文件才会被压缩
        })
      )
      // 开启分离js，配置Webpack的优化选项
      config.optimization = {
        runtimeChunk: 'single', // 将runtime代码单独提取为一个chunk
        splitChunks: { // 配置分割代码块的规则
          chunks: 'all', // 选择所有类型的chunk进行优化
          maxInitialRequests: Infinity, // 允许的最大初始请求数，Infinity表示无限制
          minSize: 20000, // 每个代码块的最小大小，小于该值的模块不会被提取
          cacheGroups: { // 定义缓存组
            vendor: { // 缓存组的名称为vendor
              test: /[\\/]node_modules[\\/]/,  // 匹配条件，node_modules目录下的模块
              name (module) { // 模块名称的生成规则
                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1] // 获取模块名称
                return `npm.${packageName.replace('@', '')}` // 返回以npm.开头的模块名称，@符号替换为空字符串
              }
            }
          }
        }
      };
    }
    // 将定义的插件数组合并到Webpack配置中的插件数组中
    config.plugins = [...config.plugins, ...plugins];
  },
  chainWebpack (config) {
    // 删除 webpack 中的预加载和预获取资源的插件
    // 这些插件通常会在项目中引入一些未使用的资源，对于一些性能要求较高的项目，可能希望移除这些插件以减少无用资源的加载。
    config.plugins.delete('preload') // TODO: need test
    config.plugins.delete('prefetch') // TODO: need test
    // 将入口文件配置为包含了 Babel polyfill 的 main.js 文件
    config.entry.app = ['@babel/polyfill', './src/main.js']
    // 设置了一个别名 @，指向项目中的 src 目录
    // 在代码中引用文件时就可以使用 @ 代替 src
    config.resolve.alias
      .set('@', resolve('src'))
      .end()
    // 如果是开发环境，则调用 config.devtool('cheap-source-map') 方法来配置 devtool 选项，以生成方便调试的源映射文件
    config
      .when(process.env.NODE_ENV === 'development',
        config => config.devtool('cheap-source-map')
      )
    // 图片处理规则
    config.module
      .rule('images')
      .test(/\.(woff2?|eot|ttf|otf|png|jpe?g|gif|svg)(\?.*)?$/) // 匹配图片文件的文件名后缀
      .use('url-loader') // 使用 url-loader 加载器处理图片文件
      .loader('url-loader')
      .options({
        limit: 80000, // 小于 80000 字节的图片转换为 base64 编码的 Data URL
        esModule: false // 禁用 ES 模块语法
      })
      if (IS_PROD) {
        config.module
          .rule('images')
          .test(/\.(woff2?|eot|ttf|otf|png|jpe?g|gif|svg)(\?.*)?$/)
          .use('image-webpack-loader') // 用于优化图片文件
          .loader('image-webpack-loader')
          .options({
            mozjpeg: { progressive: true, quality: 65 },
            optipng: { enabled: false },
            pngquant: { quality: [0.65, 0.9], speed: 4 },
            gifsicle: { interlaced: false }
          })
      }
  }
}

以上代码的主要作用是根据环境判断是否为生产环境，如果是则添加对应的插件配置和优化选项。其中，主要的插件是 CompressionWebpackPlugin，用于对资源文件进行 gzip 压缩，在生产环境中提高加载速度。同时，通过配置 splitChunks 选项，将第三方库和公共模块分离到单独的文件中，以优化浏览器缓存机制，提高页面加载速度。

附：

其中一些关键配置项解析

publicPath: 指定项目的基本 URL 路径，通常用于将静态资源部署到 CDN 上时使用。在这个配置中，'./' 表示相对路径。
outputDir: 指定打包后的文件输出目录。
assetsDir: 指定放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
productionSourceMap: 是否在生产环境下生成 source map 文件，方便调试，默认为 false。
css.loaderOptions: 用于向 CSS 相关的 loader 传递选项。在这里使用 sass-loader 加载器，引入了一个变量文件。
configureWebpack: 用于修改 webpack 的配置，在这里添加了一些插件，比如压缩插件 CompressionWebpackPlugin，根据环境变量决定是否启用压缩。
chainWebpack: 通过 webpack-chain 的 API 修改 webpack 配置，包括修改入口文件、配置别名、删除预加载和预取等操作。
url-loader 和 image-webpack-loader: 用于处理图片资源，限制图片大小，并进行图片优化，例如压缩、转换格式等。