vue-cli脚手架npm相关文件解读(6)build.js
系列文章传送门:
下面是build/vue-loader.conf.js中相关代码和配置的说明
项目地址:https://github.com/SmileSmith(感觉不错的话帮忙打个星哈 ~)
/* * npm run build 构建执行文件,主要用于生产环境 * 建议先查阅webapck.prod.conf.js */ // npm和node版本检查 require('./check-versions')() // 设置环境变量为production // process.env 是node环境内置的变量,在命令行里可以通过 set 变量名=值的方式来设置,等价于 set NODE_ENV='production' process.env.NODE_ENV = 'production' var ora = require('ora') // ora是一个命令行转圈圈动画插件,好看用的 var rm = require('rimraf') // rimraf插件是用来执行UNIX命令rm和-rf的用来删除文件夹和文件,清空旧的文件 var path = require('path') var chalk = require('chalk') // chalk插件,用来在命令行中输出不同颜色的文字 var webpack = require('webpack') var config = require('../config') // 项目配置文件 var webpackConfig = require('./webpack.prod.conf') // 生产环境的Webpack配置文件 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) { spinner.stop() if (err) throw err 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' )) }) })
参考:http://www.cnblogs.com/ye-hcj/archive/2017/06.html
vue-cli脚手架npm相关文件解读(6)build.js的更多相关文章
- vue-cli脚手架npm相关文件解读(1)webpack.base.conf.js
系列文章传送门: 1.build/webpack.base.conf.js 2.build/webpack.prod.conf.js 3.build/webpack.dev.conf.js 4.bui ...
- vue-cli脚手架npm相关文件解读(4)utils.js
系列文章传送门: 1.build/webpack.base.conf.js 2.build/webpack.prod.conf.js 3.build/webpack.dev.conf.js 4.bui ...
- vue-cli脚手架npm相关文件解读(9)config/index.js
系列文章传送门: 1.build/webpack.base.conf.js 2.build/webpack.prod.conf.js 3.build/webpack.dev.conf.js 4.bui ...
- vue-cli脚手架npm相关文件解读(8)check-versions.js
系列文章传送门: 1.build/webpack.base.conf.js 2.build/webpack.prod.conf.js 3.build/webpack.dev.conf.js 4.bui ...
- vue-cli脚手架npm相关文件解读(7)dev-server.js
系列文章传送门: 1.build/webpack.base.conf.js 2.build/webpack.prod.conf.js 3.build/webpack.dev.conf.js 4.bui ...
- vue-cli脚手架npm相关文件解读(5)vue-loader.conf.js
系列文章传送门: 1.build/webpack.base.conf.js 2.build/webpack.prod.conf.js 3.build/webpack.dev.conf.js 4.bui ...
- vue-cli脚手架npm相关文件解读(3)webpack.dev.conf.js
系列文章传送门: 1.build/webpack.base.conf.js 2.build/webpack.prod.conf.js 3.build/webpack.dev.conf.js 4.bui ...
- vue-cli脚手架npm相关文件解读(2)webpack.prod.conf.js
系列文章传送门: 1.build/webpack.base.conf.js 2.build/webpack.prod.conf.js 3.build/webpack.dev.conf.js 4.bui ...
- 13. Vue CLI脚手架
一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...
随机推荐
- 51nod_1253:Kundu and Tree(组合数学)
题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1253 全为红边的情况下,ans=C(n,3).假设被黑边相连 ...
- [COGS 1752] 摩基亚Mokia
照例先上题面 1752. [BOI2007]摩基亚Mokia 输入文件:mokia.in 输出文件:mokia.out 时间限制:1.5 s 内存限制:128 MB [题目描述] 摩尔瓦多的移 ...
- 又见angular----步一步做一个angular4小项目
这两天看了看angular4的文档,发现他和angular1.X的差别真的是太大了,官方给出的那个管理英雄的Demo是一个非常好的入门项目,这里给出一个管理个人计划的小项目,从头至尾一步一步讲解如何去 ...
- c++ STL 容器——序列
STL中11个容器类型分别是deque,list,queue,priority_queue,stack,vector,map,multimap,set,multiset,bieset(在比特级处理数据 ...
- Git时光机穿梭之工作区和暂存区
Git和其他版本控制系统如SVN的一个不同之处就是有暂存区的概念. 先来看名词解释. 工作区(Working Directory) 就是你在电脑里能看到的目录,比如我的learngit文件夹就是一个工 ...
- vcruntime140.dll丢失解决
之前安装好apache2.4后,打开突然报这样的错误,所以百度一下,发现了问题所在,原因是系统需要安装一个插件,才能正常运行apache2.4 Microsoft Visual C++ 2005 Re ...
- Luogu P1576 最小花费
题目背景 题目描述 在n个人中,某些人的银行账号之间可以互相转账.这些人之间转账的手续费各不相同.给定这些人之间转账时需要从转账金额里扣除百分之几的手续费,请问A最少需要多少钱使得转账后B收到100元 ...
- Android -- 深入了解自定义属性
1,相信我们写过自定义控件的同学都会有一个疑问,自定义属性到底是怎么工作的,为什么要使用自定义属性呢,接下来结带着大家一起来学习学习,在学习这一篇的时候,可以下看看我的上一篇<从源码的角度一步步 ...
- --使用oracle数据先要创建表空间
one\--创建表空间 CREATE TABLESPACE 表空间的名字DATAFILE 'E:\oracle\app\userdata\java5space.dbf' --表空间物理文件路径SIZE ...
- 升级项目到.NET Core 2.0,在Linux上安装Docker,并成功部署
概述 容器,顾名思义是用来存放并容纳东西的器皿: 而容器技术伴着Docker的兴起也渐渐的映入大家的眼帘,它是一个抽象的概念,同时也是默默存在世上多年的技术,不仅能使应用程序间完全的隔离,而且还能在共 ...