vue-cli中webpack配置之build.js

ps：本文中内容仅限于使用vue-cli的2.8.x版本生成的webpack项目

文件位置

文件位置

在这个文件中，主要做了以下几项配置

• loading效果
• webpack编译
• 输出信息

配置内容

// 检查node和npm的版本
require('./check-versions')()
process.env.NODE_ENV = 'production'
  // 引入ora模块，可以在控制台显示编译信息
var ora = require('ora')
var rm = require('rimraf')
var path = require('path')
  // 可以配置编译信息在控制台的显示样式
var chalk = require('chalk')
var webpack = require('webpack')
var config = require('../config')
var webpackConfig = require('./webpack.prod.conf')
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()
      // 如果出错，抛出错误
    if (err) throw err
      // 配置编译信息的显示样式
    process.stdout.write(stats.toString({
      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'
    ))
  })
})

该系列全部文章

1. vue-cli中webpack配置之build.js
2. vue-cli中webpack配置读之check-versions.js
3. vue-cli中webpack配置之dev-client.js
4. vue-cli中webpack配置之dev-server.js
5. vue-cli中webpack配置之utils.js
6. vue-cli中webpack配置之vue-loader-conf.js
7. vue-cli中webpack配置之webpack.base.conf.js
8. vue-cli中webpack配置之webpack.dev.conf.js
9. vue-cli中webpack配置之webpack.prod.conf.js