系列文章传送门:

1、build/webpack.base.conf.js

2、build/webpack.prod.conf.js

3、build/webpack.dev.conf.js

4、build/utils.js

5、build/vue-loader.conf.js

6、build/build.js

7、build/dev-server.js

8、build/check-versions.js

9、../config/index.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的更多相关文章

  1. 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 ...

  2. 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 ...

  3. 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 ...

  4. 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 ...

  5. 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 ...

  6. 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 ...

  7. 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 ...

  8. 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 ...

  9. 13. Vue CLI脚手架

    一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...

随机推荐

  1. 使用random输出10个double型的随机数

    使用random输出10个double型的随机数 代码如下: package Day05;import java.util.Random;import java.util.Scanner; publi ...

  2. JQueryEasyUI学习简单Demo

    一.Layout布局 声明:此文档参考了jQuery EasyUI官方文档 布局容器有5个区域:北.南.东.西和中间.中间区域面板是必须的,边缘的面板都是可选的.每个边缘区域面板都可以通过拖拽其边框改 ...

  3. 提交到APPStore出现ERROR ITMS-90474

    解决的方案是:在工程的targets--->General----->Develoment Info ------->Status BarStyle

  4. (转)关于java.lang.UnsupportedClassVersionError解决方法总结

    背景:在服务器部署程序是后总是怀疑jdk安装不正确,所以打算运行一个小程序进行测试. 通过这样一个方法 ,可以测试jdk是否正确安装. 1 问题描述 首先编写了个Hello.java的代码: 这里我本 ...

  5. 任务调度---crontab

    1.   crontab相当于windows下的任务与计划,可以设定定时任务,周期执行的任务 2.   设置任务调度文件 crontab  -e       进入任务界面,添加如下命令 0 2 * * ...

  6. super 与 this 同时使用问题

    大家都知道this 和 super 调用构造函数时都必须放在第一句,今天同学问我的一个问题有点意思. 那么:我怎么在子类中 显式的用 super 初始化父类同时用 this 初始化子类? ------ ...

  7. FCKEditor在jsp页面中的配置方法

    大家在使用博客园或者是在网站上面发表一些东西的时候,往往会发现,输入文字的不是一个简单的文本框,而是一个类似于word的在线编辑环境.这个插件叫FCKEditor,使用这个插件要进行一定程度的配置,下 ...

  8. Linux 下 安装jdk 1.7

    Linux 下 安装jdk 1.7 参考百度经验 http://jingyan.baidu.com/album/ce09321b7c111f2bff858fea.html?picindex=6 第一步 ...

  9. 手脱ASPack

    ESP定律到达OEP,重新分析代码块 在菜单栏中找到OllyDump插件,该插件的窗口的弹了出来,有一些选项可供我们修改,我们可以对Base of Code进行修改,这里Base of Code = ...

  10. Java读取properties文件(非泛滥)

    根据spring配置文件的 PropertiesFactoryBean和 PropertyPlaceholderConfigurer可以选择不同的加载方式,我是使用System.setProperty ...