litemall源码阅读3.01管理后台前端litemall-admin中的vue.config.js文件

为vue的核心配置文件了。vue的核心配置文件包含了webpack配置文件的内容。或者说是对webpack配置文件的补充。

//使用JS的严格模式
'use strict'
//引入node.js的path模块
const path = require('path')
//函数用于连接路径字符串
function resolve(dir) {
  return path.join(__dirname, dir)
}

const name = 'litemall' // 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 method:
// port = 9527 npm run dev OR npm run dev --port = 9527
//npm的process变量,其实这两个值都为NULL，所以不做其他配置的话port就是9527
const port = process.env.port || process.env.npm_config_port || 9527 // 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
   */
　 //基本URL
  publicPath: './',
　//构建环境目录
  outputDir: 'dist',
　//静态资源目录，不会被webpack的loader等处理
  assetsDir: 'static',
　//配置是否保存lint后的代码
  lintOnSave: process.env.NODE_ENV === 'development',
  //生产环境下不需要sourcemap，sourcemap解释
  productionSourceMap: false,
  //webpack的devserver选项
  devServer: {
    //端口号
    port: port,
　　 //启动后打开浏览器
    open: true,
 　　//显示警告和错误
    overlay: {
      warnings: false,
      errors: true
    }
  },
  //vuecli提供的专门用于修改webpack配置的对象
  configureWebpack: {
    // 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,
　　 //创建别名，@直接指代src
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  },
  //链式操作，可以对loader再做一次配置，或者增加新的loader
  chainWebpack(config) {
    // it can improve the speed of the first screen, it is recommended to turn on preload
    // config.plugins.delete('preload')

    // when there are many pages, it will cause too many meaningless requests
　　 //这里应该是为了优化首页的加载速度
    config.plugins.delete('prefetch') //

    // set svg-sprite-loader
　　 //svgloader的配置，这边也可以写到webpack.config.js中的应该
    config.module
      .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
      .when(process.env.NODE_ENV !== 'development',
　　　　　//将运行时打包进主页html中，减少http请求，提高首页加载速度
        config => {
          config
            .plugin('ScriptExtHtmlWebpackPlugin')
            .after('html')
            .use('script-ext-html-webpack-plugin', [{
            // `runtime` must same as runtimeChunk name. default is `runtime`
              inline: /runtime\..*\.js$/
            }])
            .end()
          config
　　　　　　　//代码分块，将变动比较少的代码剥离出来
            .optimization.splitChunks({
              chunks: 'all',
              cacheGroups: {
                libs: {
                  name: 'chunk-libs',
                  test: /[\\/]node_modules[\\/]/,
                  priority: 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
                  test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
                },
                commons: {
                  name: 'chunk-commons',
                  test: resolve('src/components'), // can customize your rules
                  minChunks: 3, //  minimum common number
                  priority: 5,
                  reuseExistingChunk: true
                }
              }
            })
　　　　    //runtime.js单独打包
          config.optimization.runtimeChunk('single')
        }
      )
  }
}