转载自:https://www.cnblogs.com/ye-hcj/p/7096341.html
这是vue-cli脚手架工具的生产环境配置入口 package.json中的"build": "node build/build.js"的直接指向。

//版本检查 node的版本号  版本有要求"engines": {"node": ">= 4.0.0","npm": ">= 3.0.0"}
//立即执行
require('./check-versions')()
//process是node中的global全局对象的属性,process是node中的全局变量,env设置环境变量
process.env.NODE_ENV = 'production'
// ora是一个命令行转圈圈动画插件,好看用的
var ora = require('ora')
// rimraf插件是用来执行UNIX命令rm和-rf的用来删除文件夹和文件,清空旧的文件
var rm = require('rimraf')
// node.js路径模块 连接路径,例子:path.join('/foo', 'bar', 'baz/asdf', 'quux', '..');// 返回: '/foo/bar/baz/asdf'var path = require('p//chalk插件,用来在命令行中输入不同颜色的文字
var chalk = require('chalk')
// 引入webpack模块使用内置插件和webpack方法
var webpack = require('webpack')
//commonJs风格,引入文件模块,引入模块分为内置模块与文件模块两种
var config = require('../config')
var webpackConfig = require('./webpack.prod.conf')
// 开启转圈圈动画
var spinner = ora('building for production...')
spinner.start()
// 调用rm方法,第一个参数的结果就是 绝对/工程名/dist/static,表示删除这个路径下面的所有文件
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
// 如果删除的过程中出现错误,就抛出这个错误,同时程序终止
if (err) throw err
// 没有错误,就执行webpack编译
webpack(webpackConfig, function (err, stats) {
// 这个回调函数是webpack编译过程中执行
spinner.stop()// 停止转圈圈动画
if (err) throw err  // 如果有错误就抛出错误
// 没有错误就执行下面的代码,process.stdout.write和console.log类似,输出对象
////process.stdout用来控制标准输出,也就是在命令行窗口向用户显示内容。它的write方法等同于console.log
process.stdout.write(stats.toString({
// stats对象中保存着编译过程中的各种消息
colors: true,// 增加控制台颜色开关
modules: false,// 不增加内置模块信息
children: false,// 不增加子级信息
chunks: false,// 允许较少的输出
chunkModules: false // 不将内置模块的信息加到包信息
}) + '\n\n')
// 以上就是在编译过程中,持续打印消息
// 下面是编译成功的消息
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'
))
})
})

vue-cli中的build.js配置文件详细解析的更多相关文章

  1. vue-cli脚手架build目录中的build.js配置文件

    该随笔收藏自: vue-cli脚手架build目录中的build.js配置文件 这个配置文件是命令npm run build 的入口配置文件,主要用于生产环境 由于这是一个系统的配置文件,将涉及很多的 ...

  2. vue-cli脚手架build目录中的dev-server.js配置文件

    本文系统讲解vue-cli脚手架build目录中的dev-server.js配置文件 这个配置文件是命令npm run dev 和 npm run start 的入口配置文件,主要用于开发环境 由于这 ...

  3. 【转】UML中的几种关系详细解析

    UML图中类之间的关系:依赖,泛化,关联,聚合,组合,实现 类与类图 1) 类(Class)封装了数据和行为,是面向对象的重要组成部分,它是具有相同属性.操作.关系的对象集合的总称. 2) 在系统中, ...

  4. vue cli 中关于vue.config.js中chainWebpack的配置

    Vue CLI  的官方文档上写:调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象. Vue CLI 内部的 webpack 配置 ...

  5. vue cli中的env详解

    前言 相信使用过 vueCli 开发项目的小伙伴有点郁闷,正常开发时会有三个接口环境(开发,测试,正式),但是 vueCli 只提供了两种 development,production(不包含 tes ...

  6. Vue Cli 中使用 Karma / Chrome 执行样式相关单元测试

    在 GearCase 开源项目 中,我使用了 Vue Cli 的默认测试框架.因此和样式相关的东西,都无法进行测试.因为它并不类似于无头浏览器,而是存在于虚拟内存之中. 现状 在如下 button.s ...

  7. 在vue项目中使用canvas-nest.js,报parameter 1 is not of type 'Element'

    canvas-nest.js是一款轻量的网页特效,如图: github地址:https://github.com/hustcc/canvas-nest.js 在普通的html项目中,只要将<sc ...

  8. 在vue项目中的main.js中直接使用element-ui中的Message 消息提示、MessageBox 弹框、Notification 通知

    需求来源:向后台请求数据时后台挂掉了,后台响应就出现错误,不做处理界面就卡住了,这时需要在main.js中使用axios的响应拦截器在出现相应错误是给出提示.项目使用element-ui,就调用里面的 ...

  9. vue 项目中 自定义 webpack 的 配置文件(webpack.config.babel.js)

    webpack.config.babel.js,这样命名是想让webpack在编译的时候自动识别es6的语法,现在貌似不需要这样命名了,之前用webpack1.x的时候貌似是需要的 let path ...

随机推荐

  1. windows下使用c++调用redis

    不废话,unix下c++调用 redis可以看这个: http://blog.csdn.net/youngqj/article/details/8266177 ==================== ...

  2. Swift-8-枚举

    // Playground - noun: a place where people can play import UIKit // 枚举语法 enum SomeEnumeration { // e ...

  3. String painter (hdu 2476 DP好题)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=2476 题目大意: 给出两个等长的串S, T, 要将S变成T, 每次可以把S的连续的一段变成相同的字母 ...

  4. gibhub上搭建个人静态网站介绍

    之前学习过git的基本命令.今天介绍一下github上搭建个人网站的步骤. 在window系统上搭建gibhub个人网站(只能执行html.css和js文件),这就是纯静态页面. 步骤一:注册gith ...

  5. vue项目创建步骤小结

    第一步创建项目目录demo cd demo npm init  生成package.json 初始化项目工具使用 命令行工具 (CLI) 快速初始化 # 全局安装 vue-cli $ npm inst ...

  6. AWS系列-磁盘扩容

    1 磁盘扩容 1.1 卷介绍 aws磁盘扩容有两个方式 1.购买新的磁盘,挂载到相应的目录 2.原来磁盘做快照,购买新的磁盘,选择恢复快照到硬盘上,这样相当于,从一块硬盘上50G升级到100G 说到a ...

  7. python bottle学习(二)加载配置文件

    from bottle import (run, route, get, post, default_app, Bottle) """ 首先获得一个app对象,有两种方法 ...

  8. iOS-Pods里三方文件导入找不到头文件

    解决办法: 在target 里面 选择 build setting 搜索User Header Search Paths 然后 里面添加一条 ${SRCROOT}     recursive//后面填 ...

  9. boost::archive::binary_iarchive

    #include <iostream> #include <string> #include <sstream> #include <vector> # ...

  10. 【BZOJ1996】[Hnoi2010]chorus 合唱队 区间DP

    [BZOJ1996][Hnoi2010]chorus 合唱队 Description Input Output Sample Input 4 1701 1702 1703 1704 Sample Ou ...