解析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 插件或预设。

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

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: {
    // ...
  }
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

三、实践案例

'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 }
          })
      }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106

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

附：

其中一些关键配置项解析

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