vue-cli2 webpack配置阅读笔记-打包（一）

打包

在命令行输入命令之后，会在package.json文件下找到对应的命令 node build/buld.js

build.js

build.js 代码比较少

'use strict'
require('./check-versions')()

process.env.NODE_ENV = 'production' // 设置当前环境，也可以在命令行内实现

const ora = require('ora') // 一个显示友好的loading spinner
const rm = require('rimraf') // 删除文件夹及文件 相当于 rm -rf
const path = require('path') 
const chalk = require('chalk') // 命令行优化显示工具，可改变命令颜色
const webpack = require('webpack')
 // webpack 的nodejs api , 在自定义构建或开发流程时可以使用，这个文档比较隐蔽，不太容易发现。
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')

const spinner = ora('building for production...')
spinner.start() // 根据异步开启关闭加载动画和显示

rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
 // 找到定义好的静态资源文件夹，删除，这里path.join 和 path.resolve需要区分，join相当于/a /b => /a/b
  if (err) throw err
  webpack(webpackConfig, (err, stats) => {
    spinner.stop()
    if (err) throw err
    process.stdout.write(stats.toString({ 
// process.stdout.write是向命令行写入，stats是webpack的nodejs api中的一些配置
      colors: true,
      modules: false,
      children: false,
 // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
      chunks: false,
      chunkModules: false
    }) + '\n\n')

    if (stats.hasErrors()) {
      console.log(chalk.red('  Build failed with errors.\n'))
      process.exit(1)
    }

    console.log(chalk.cyan('  Build complete.\n'))
    console.log(chalk.yellow(
      '  Tip: built files are meant to be served over an HTTP server.\n' +
      '  Opening index.html over file:// won\'t work.\n'
    ))
  })
})

check-version.js

'use strict'
const chalk = require('chalk')
const semver = require('semver') // 语义化的版本工具，可以进行基本的比较和格式化
const packageConfig = require('../package.json')
const shell = require('shelljs')// nodejs版的命令

输出的内容看上去一大坨，实际上只是校验了版本是否符合版本规则，如果不符合在命令行输出警告信息。process.exit(1)我的理解是关闭执行命令时开启的子进程。

module.exports = function () {
  const warnings = []

  for (let i = 0; i < versionRequirements.length; i++) {
    const mod = versionRequirements[i]

    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
      warnings.push(mod.name + ': ' +
        chalk.red(mod.currentVersion) + ' should be ' +
        chalk.green(mod.versionRequirement)
      )
    }
  }

  if (warnings.length) {
    console.log('')
    console.log(chalk.yellow('To use this template, you must update following to modules:'))
    console.log()

    for (let i = 0; i < warnings.length; i++) {
      const warning = warnings[i]
      console.log('  ' + warning)
    }

    console.log()
    process.exit(1)
  }
}

function exec (cmd) {
// 开启一个子进程执行输入的命令
  return require('child_process').execSync(cmd).toString().trim()
}

const versionRequirements = [
  {
    name: 'node',
// 去掉前面的v
    currentVersion: semver.clean(process.version),
    versionRequirement: packageConfig.engines.node
  }
]

if (shell.which('npm')) {
  versionRequirements.push({
    name: 'npm',
    currentVersion: exec('npm --version'),
    versionRequirement: packageConfig.engines.npm
  })
}