vue-cli中的build.js配置文件详细解析
转载自: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配置文件详细解析的更多相关文章
- vue-cli脚手架build目录中的build.js配置文件
该随笔收藏自: vue-cli脚手架build目录中的build.js配置文件 这个配置文件是命令npm run build 的入口配置文件,主要用于生产环境 由于这是一个系统的配置文件,将涉及很多的 ...
- vue-cli脚手架build目录中的dev-server.js配置文件
本文系统讲解vue-cli脚手架build目录中的dev-server.js配置文件 这个配置文件是命令npm run dev 和 npm run start 的入口配置文件,主要用于开发环境 由于这 ...
- 【转】UML中的几种关系详细解析
UML图中类之间的关系:依赖,泛化,关联,聚合,组合,实现 类与类图 1) 类(Class)封装了数据和行为,是面向对象的重要组成部分,它是具有相同属性.操作.关系的对象集合的总称. 2) 在系统中, ...
- vue cli 中关于vue.config.js中chainWebpack的配置
Vue CLI 的官方文档上写:调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象. Vue CLI 内部的 webpack 配置 ...
- vue cli中的env详解
前言 相信使用过 vueCli 开发项目的小伙伴有点郁闷,正常开发时会有三个接口环境(开发,测试,正式),但是 vueCli 只提供了两种 development,production(不包含 tes ...
- Vue Cli 中使用 Karma / Chrome 执行样式相关单元测试
在 GearCase 开源项目 中,我使用了 Vue Cli 的默认测试框架.因此和样式相关的东西,都无法进行测试.因为它并不类似于无头浏览器,而是存在于虚拟内存之中. 现状 在如下 button.s ...
- 在vue项目中使用canvas-nest.js,报parameter 1 is not of type 'Element'
canvas-nest.js是一款轻量的网页特效,如图: github地址:https://github.com/hustcc/canvas-nest.js 在普通的html项目中,只要将<sc ...
- 在vue项目中的main.js中直接使用element-ui中的Message 消息提示、MessageBox 弹框、Notification 通知
需求来源:向后台请求数据时后台挂掉了,后台响应就出现错误,不做处理界面就卡住了,这时需要在main.js中使用axios的响应拦截器在出现相应错误是给出提示.项目使用element-ui,就调用里面的 ...
- vue 项目中 自定义 webpack 的 配置文件(webpack.config.babel.js)
webpack.config.babel.js,这样命名是想让webpack在编译的时候自动识别es6的语法,现在貌似不需要这样命名了,之前用webpack1.x的时候貌似是需要的 let path ...
随机推荐
- Eqs - poj 1840(hash)
题意:对于方程:a1x13+ a2x23+ a3x33+ a4x43+ a5x53=0 ,有xi∈[-50,50], xi != 0, any i∈{1,2,3,4,5}. 现在给出a1,a2,a3, ...
- Android Listview 去除边框
最近在做一个时间轴的功能,因为原生效果的Listview有item分隔边框,所以就需要去除边框,调用listview的setDivider方法就可以了: listView.setDivider(nul ...
- struts2中,Action通过什么方式获得用户从页面输入的数据,又是通过什么方式把其自身的数据传给视图的?
struts2中,Action通过什么方式获得用户从页面输入的数据,又是通过什么方式把其自身的数据传给视图的? 解答: 1)可以直接通过与表单元素相同名称的数据成员(需要存在符合命名规范set和get ...
- highCharts+Struts2生成柱状图
这篇文章主要结合Struts2+json+Highcharts实现动态数据的显示.为了节省时间,就不写数据库了.在action中用一个集合来模拟从数据库取到的数据.模拟数据为三个学生在不同时间成绩的变 ...
- oracle 里 插入空字符串会被转成null插入
oracle 里 插入空字符串会被转成null插入 因为非空列如果要插入空字符串数据,最好是插个空格,因为空字符串会报错
- Bootstrap的下拉菜单float问题
在学习bootstrap中的下拉菜单时,遇到下面情况: <div class="dropdown"> <button class="btn btn-de ...
- Ad Hoc Distributed Queries组件
http://www.cnblogs.com/870060760JR/p/6016080.html SQL Server 阻止了对组件“Ad Hoc Distributed Queries”的 STA ...
- 在Windows端安装kafka 提示错误: 找不到或无法加载主类 的解决方案
在配置好kafka的server.properties文件后,cmd进入命令窗口输入命令:.\bin\windows\kafka-server-start.bat config\server.prop ...
- 关于sqlSessionTemplate
SqlSessionTemplate是MyBatis-Spring的核心.这个类负责管理MyBatis的SqlSession,调用MyBatis的SQL方法,翻译异常.SqlSessionTempla ...
- 如何转义CSV文件中的逗号
CSV全称是:Comma Separated Values 或者 Character Separated Values. 尽管第一种说法更常见,但我觉得还是第二种说法更确切一些,因为你可以使用其它字符 ...