浅析vue-cli4相关配置解析：productionSourceMap、lintOnSave、css.sourceMap、css.extract、parallel、configureWebpack、chainWebpack、outputDir/assetsDir/indexPath

一、基础配置解析及生产环境关闭sourceMap

module.exports = {
  publicPath: './', // 基本路径
  outputDir: 'dist', // 输出文件目录
  assetsDir: './assets',
  indexPath: 'index.html',
  filenameHashing: true, // 生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存
  lintOnSave: false, // eslint-loader 是否在保存的时候检查
  productionSourceMap: true, // 生产环境是否生成 sourceMap 文件
}

二、lintOnSave配置

1、用途：设置是否在开发环境下每次保存代码时都启用 eslint 验证，或验证等级

2、value：

false：关闭 elsint 检测

true：开启每次保存都进行检测，效果与warning一样

warning：开启每次保存都进行检测，lint 错误将显示到控制台命令行，而且编译并不会失败

default：开启每次保存都进行检测，lint 报错信息将显示到浏览器页面上，且编译失败

error：开启每次保存都进行检测，lint 报错信息以及警告信息将显示到浏览器页面上，且编译失败

3、为什么要加 module.exports = { lintOnSave: false }，是因为 eslint 是语法检查工具，但限制太过于严格，大部分开发人员无法适应，所以产生这个需求

三、css.sourceMap

1、默认 false

2、用途：设置是否开启 css 的 sourcemap 功能。css 的sourcemap作用类似与 js 的 sourcemap

　　注意：开启可能会影响构建性能。

3、用法：

module.exports = {
  // css相关配置
  css: {
    extract: false, // 是否使用css分离插件 ExtractTextPlugin
    sourceMap: true // 开启 CSS source maps
  }
}

　　3个结论：

（1）通过css.sourceMap，我们可以明确的指导css代码在项目文件中的位置

（2）如果开启css.extract，那么css.sourceMap效果就似乎是失效了。表面上看确实如此。但实际上css.sourceMap还是发挥了作用。

（3）在使用css.sourceMap时，我们最好关闭css.extract。

　　至于具体对比，详见这篇文章：https://blog.csdn.net/weixin_44869002/article/details/105831784

四、css.extract

1、Default: 生产环境下是 true，开发环境下是 false

2、官方文档说明

是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。

同样当构建 Web Components 组件时它总是会被禁用 (样式是 inline 的并注入到了 shadowRoot 中)。

当作为一个库构建时，你也可以将其设置为 false 免得用户自己导入 CSS。

提取 CSS 在开发环境模式下是默认不开启的，因为它和 CSS 热重载不兼容。然而，你仍然可以将这个值显性地设置为 true 在所有情况下都强制提取。

3、用途：官方文档说了这么多。总之一句话，css.extract 用于控制是否强制分离 vue 组件内的 css

4、对同一个项目：开启css.extract后，打包的结果会多出一个 css 文件夹以及 css 文件。

5、如果没有开启css.extract，组件样式以内部样式表的形式加载的。

　　如果开启的话，则是以单独样式表的形式加载的。

五、parallel

1、Default: require('os').cpus().length > 1

2、官方文档：用于提高项目打包速度。默认，当电脑CPU内核多于一个时自动启动。

是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。

module.exports = {
　　// 是否为 Babel 或 TypeScript 使用 thread-loader。
　　// 该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
　　parallel: require('os').cpus().length > 1
}

六、configureWebpack

1、Type: object | Function

2、官方文档说明：

　　如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。

　　如果这个值是一个函数，则会接收被解析的配置作为参数。该函数既可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。

3、用途：如官方文档所说，借助 configureWebpack 我们可以实现随webpack配置的新增与修改。

4、用法

module.exports = {
  publicPath: './', // 基本路径
  outputDir: 'dist', // 输出文件目录

  // webpack配置
  configureWebpack: (config) => {
   // config为被解析的配置
    Object.assign(config, {
      // 开发生产共同配置，新增一些别名设置
      resolve: {
        alias: {
          '@': path.resolve(__dirname, './src'),
          '@c': path.resolve(__dirname, './src/components'),
          '@p': path.resolve(__dirname, './src/pages'),
          '@v': path.resolve(__dirname, './src/views'),
        } // 别名配置
      }
    })
  }
}

七、chainWebpack

　　Webpack配置另一种写法—— webpack-chain（链式操作）。

module.exports = {
  publicPath: './', // 基本路径
  outputDir: 'dist', // 输出文件目录
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
        .loader('vue-loader')
        .tap(options => {
          // 修改它的选项...
          return options
        })
  }
}

八、outputDir、assetsDir、indexPath

1、outputDir

（1）Type: string      Default: dist

（2）作用：设置项目打包生成的文件的存储目录，可以是静态路径也可以是相对路径。

　　注意：相对路径是相对于项目文件当前的根路径。

2、assetsDir

（1） Type: string      Default: ''

（2）作用：设置放置打包生成的静态资源 (js、css、img、fonts) 的目录。

　　注意： 该目录是相对于 outputDir 。

（3）用法：

module.exports = {
  publicPath: './', // 基本路径
  outputDir: 'dist', // 输出文件目录
  assetsDir: 'assets'
}

　　你设置了 assets，那么你打包后 dist 下就有个 assets，那些文件就放在这里

3、indexPath

（1）Type: string       Default: 'index.html'

（2）用途：用于设定打包生成的 index.html 文件的存储位置

　　注意：该路径若是相对路径，则相对于 outputDir；当然，也可以是一个绝对路径；

　　路径一定要以文件名+后缀结尾，最好以index.html结尾。