Vue Webpack Template 의 빌드 파헤치기

.
├── build/                      # webpack config files
│   ├── build.js
│   ├── check-versions.js
│   ├── utils.js
│   ├── vue-loader.config.js
│   ├── webpack.base.config.js
│   ├── webpack.dev.config.js
│   └── webpack.prod.config.js
├── config/
│   ├── index.js                # main project config
│   ├── dev.env.js
│   └── prod.env.js
├── src/
│   ├── main.js                 # app entry file
│   ├── App.vue                 # main app component
│   ├── components/             # ui components
│   │   └── ...
│   └── assets/                 # module assets (processed by webpack)
│       └── ...
└── static/                     # pure static assets (directly copied)

// check-versions를 실행시켜 각 모듈들이 버젼에 맞는지 체크합니다.
require('./check-versions')()

// 환경변수를 production 으로 설정
process.env.NODE_ENV = 'production'

// ora 라는 모듈은 terminal 에서 로딩중.. 이라는 모양을 나타내주는 모듈.
const ora = require('ora')
// UNIX 명령어중 rm -rf 라는 명령어 for node, 파일삭제
const rm = require('rimraf')
// 파일 및 디렉토리 경로로 작업 할 수 있는 유틸리티를 제공
const path = require('path')
// 터미널의 문자열을 꾸며주는 모듈
const chalk = require('chalk')
// 모듈 번들러
const webpack = require('webpack')
// config 는 dev 와 build 를 나누어 각자의 환경에대해 속성을 설정
const config = require('../config')
// 배포에 대한 환경설정을 저장
const webpackConfig = require('./webpack.prod.conf')

// build 시에 문구와 함께 로딩 아이콘 돌아감
const spinner = ora('building for production...')
spinner.start()

// 해당 경로의 파일을 삭제
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
  if (err) throw err
  // 삭제가 되었다면 모듈번들링 시작
  webpack(webpackConfig, (err, stats) => {
    ... 생략
  })
})

    base
   /    \
  /      \
 /        \
prod      dev