本文介绍的是vue-cli2.x项目中,webpack下build.js文件各条命令含义,主要是在项目目录中执行npm run build
时的设置。
项目结构参照vue-cli 2.x项目模板文件说明(一)整体结构篇
关于webpack我本人并没有进行过系统学习,边角料的碎片化学习慢慢来吧,聚沙成塔咯
'use strict' // 严格模式
require('./check-versions')() // 引入检查版本文件并立即执行
process.env.NODE_ENV = 'production' // 设置环境为生产环境
const ora = require('ora') // 引入ora
const rm = require('rimraf') // 引入rm
const path = require('path') // 引入path
const chalk = require('chalk') // 引入chalk
const webpack = require('webpack') // 引入webpack
const config = require('../config') // 引入项目中的config 目录
const webpackConfig = require('./webpack.prod.conf') // 引入webpack中生产环境配置
const spinner = ora('building for production...') // 设定ora内容
spinner.start() // 开始执行加载动画
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { // 删除dist以及static目录及所有文件
if (err) throw err
webpack(webpackConfig, (err, stats) => {
spinner.stop()
if (err) throw err
process.stdout.write(stats.toString({ // process.stdout.write与console.log相似
colors: true,
modules: false,
children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
chunks: false, // 额外代码块终止
chunkModules: false // 额外代码块的依赖模块
}) + '\n\n')
if (stats.hasErrors()) {
console.log(chalk.red(' Build failed with errors.\n'))
process.exit(1) // 强制退出进程
}
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'
))
})
})
各项引入文件解释
1、ora : 这是一个用于node终端(命令行)加载动画以及图标的工具。
这是我本地一个项目运行npm run build时的截图
2、rm : 以包的形式包装rm -rf命令,用来删除文件和文件夹的,不管文件夹是否为空,都可删除
3、path : path是nodejs的模块,提供了一些工具函数,用于处理文件与目录的路径
4、chalk :修改控制台中字符串的样式(字体样式加粗等/字体颜色/背景颜色)
5、stat: webpack统计信息,chunk是 被entry所依赖的额外的代码块,可以包含一个或者多个文件