vue-cli中的webpack配置详解

2020-06-14 06:05:34易采站长站整理

devMiddleware.waitUntilValid(function () {
console.log('> Listening at ' + uri + 'n')
})
//启动express服务
module.exports = app.listen(port, function (err) {
if (err) {
console.log(err)
return
}
// 满足条件则自动打开浏览器
if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
opn(uri)
}
})

npm run build

由于package.json中的配置,运行此命令后会执行build.js文件


process.env.NODE_ENV = 'production' //设置当前环境为production
var ora = require('ora') //终端显示的转轮loading
var rm = require('rimraf') //node环境下rm -rf的命令库
var path = require('path') //文件路径处理库
var chalk = require('chalk') //终端显示带颜色的文字
var webpack = require('webpack')
var config = require('../config')
var webpackConfig = require('./webpack.prod.conf') //生产环境下的webpack配置

// 在终端显示ora库的loading效果
var spinner = ora('building for production...')
spinner.start()

// 删除已编译文件
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
if (err) throw err
//在删除完成的回调函数中开始编译
webpack(webpackConfig, function (err, stats) {
spinner.stop() //停止loading
if (err) throw err

// 在编译完成的回调函数中,在终端输出编译的文件
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false,
chunks: false,
chunkModules: false
}) + 'nn')
})
})