vue.config.js解释

此配置文件的要求是：Vue CLI 3.3起。

'use strict'
const path = require('path')
const defaultSettings = require('./src/settings.js')

//将路径片段使用\连接起来形成路径，并规范化生成的路径
function resolve(dir) {
  return path.join(__dirname, dir)
}

const name = defaultSettings.title || 'vue' // page title

// If your port is set to 80,
// use administrator privileges to execute the command line.
// For example, Mac: sudo npm run
// You can change the port by the following methods:
// port = 9528 npm run dev OR npm run dev --port = 9528
const port = process.env.port || process.env.npm_config_port || 9529 // dev port

// All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports = {
  /**
   * You will need to set publicPath if you plan to deploy your site under a sub path,
   * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
   * then publicPath should be set to "/bar/".
   * In most cases please use '/' !!!
   * Detail: https://cli.vuejs.org/config/#publicpath
   */
  publicPath: '/',//部署应用包时的基本URL,默认假设应用是部署在一个域名的根路径下则使用/，若是部署在一个子路径下，如www.baidu.com/my-app/则使用/my-app/
  outputDir: 'dist',//运行vue-cli-service build时生成的生产环境构建文件的目录，默认目标目录在构建之前会被清除，传入--no-clean则不会被清除
  assetsDir: 'static',//放置生成的静态资源(相对于outputDir)的目录
  lintOnSave: process.env.NODE_ENV === 'development',//在开发环境下通过eslint-loader在每次保存时lint代码
  productionSourceMap: false,
  devServer: {
    port: port,
    // open: true,
    overlay: {//让浏览器overlay同时显示警告和错误
      warnings: false,
      errors: true
    },
    proxy: {
      // change xxx-api/login => mock/login
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: `http://127.0.0.1:${port}/mock`,//在开发环境中 如果你的请求是localhost:8001/api/，则将localhost:8001/api/代理访问到http://127.0.0.1:8001/mock
        changeOrigin: true,//允许跨域
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''//请求登录接口/login,就会请求ocalhost:8001/api/login,即省略/api
        }
      }
    },
    after: require('./mock/mock-server.js')//提供在服务器内部的所有其他中间件之后执行定制中间件的功能
  },
  configureWebpack: {//修改配置.若是对象则会被webpack-merge合并入最终的webpack配置;若是函数，则函数的第一个参数是已经解析好的配置，在函数内部，可以直接修改配置或者返回一个将会被合并的对象
    // provide the app's title in webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    name: name,
    resolve: {
      alias: {//设置别名
        '@': resolve('src')//设置src的别名是@，即import request from 'src/utils/request'时可写成 import request from '@/utils/request'
      }
    }
  },
  chainWebpack(config) {//是一个函数，第一个参数是已经解析好的配置，在函数内部，允许对内部的webpack配置进行更细粒度的修改
    config.plugins.delete('preload') // TODO: need test
    config.plugins.delete('prefetch') // TODO: need test

    // set svg-sprite-loader
    config.module//添加一个新的Loader
      .rule('svg')
      .exclude.add(resolve('src/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()

    // set preserveWhitespace
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.compilerOptions.preserveWhitespace = true
        return options
      })
      .end()

    config
    // https://webpack.js.org/configuration/devtool/#development
      .when(process.env.NODE_ENV === 'development',
        config => config.devtool('cheap-source-map')
      )

    config
      .when(process.env.NODE_ENV !== 'development',
        config => {
          config
            .plugin('ScriptExtHtmlWebpackPlugin')//修改插件选项
            .after('html')//指定要在html命名的文件后操作
            .use('script-ext-html-webpack-plugin', [{
            // `runtime` must same as runtimeChunk name. default is `runtime`
              inline: /runtime\..*\.js$///在html中内联的脚本
            }])
            .end()
          config
            .optimization.splitChunks({//配置SplitChunksPlugin插件
              chunks: 'all',//所有的块
              cacheGroups: {//缓存组
                libs: {
                  name: 'chunk-libs',
                  test: /[\\/]node_modules[\\/]/,//将node_modules文件下的文件单独分割成一个包
                  priority: 10,//权重为10
                  chunks: 'initial' // only package third parties that are initially dependent 用来选择分割初始化的代码块
                },
                elementUI: {
                  name: 'chunk-elementUI', // split elementUI into a single package
                  priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app权重为20
                  test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm将element-ui单独分割成一个包
                },
                commons: {
                  name: 'chunk-commons',
                  test: resolve('src/components'), // can customize your rules匹配模块资源绝对路径或块名称
                  minChunks: 3, //  minimum common number最小引用次数是3
                  priority: 5,//权重为5
                  reuseExistingChunk: true//如果当前块包含已经从主bundle中分离出来的模块，那么它将被重用，而不是生成一个新的模块，这将影响最终打包生成的块文件名称
                }
              }
            })
          config.optimization.runtimeChunk('single')//把runtime部分的代码抽离出来单独打包
        }
      )
  }
}