转载自: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. css3 一个简单的静态立方体

    <meta charset="utf8"> <style> .cube { position: absolute; left: 50%; top: 250p ...

  2. 运动规划(Motion Planning)

    相关介绍: https://mp.weixin.qq.com/s?__biz=MzA5MDE2MjQ0OQ==&mid=2652786406&idx=1&sn=f937dd6a ...

  3. ACM 博弈(难)题练习 (第一弹)

    第二弹: 套路&&经验总结: 1. N堆***的游戏,一般可以打表找SG函数的规律.比如CodeForces 603C 2.看起来是单轮的游戏,实际上可能拆分成一些独立的子游戏.比如C ...

  4. SELinux简介

    Security-Enhanced Linux (SELinux)由以下两部分组成: 1) Kernel SELinux模块(/kernel/security/selinux) 2) 用户态工具 SE ...

  5. (转)ReentrantLock与Synchronized同步区别

    转自:http://blog.csdn.net/fw0124/article/details/6672522 原文:http://www.ibm.com/developerworks/cn/java/ ...

  6. MFC多国语言——资源副本

    此随笔主要参考了http://www.cnblogs.com/xianyunhe/archive/2011/09/02/2163842.html 为软件提供多国语言的支持的具体实现方法有很多,但基本原 ...

  7. null!= xxx 和 xxx!=null有什么区别?

    从意义上将没有区别,从编程规范上讲,第一种写法是为了防止写成:null = xxx

  8. windows安装oracle11g

    windows上安装oracle11g   1.下载Oracle 11g R2 for Windows的版本 下载地址:https://www.oracle.com/technetwork/datab ...

  9. Leetcode-Recover BST

    Two elements of a binary search tree (BST) are swapped by mistake. Recover the tree without changing ...

  10. filezilla 读取目录失败

    用到FTP,本来一直用主动模式,可以最近老是读取目录失败,425 Can't open data connection 和 读取目录列表失败(搞了好久,一天) 问题解决 这个问题主要是由于使用Pass ...