对于第五层：构建打包层。我们看看有哪些源文件是值得我们注意的
这里先对整体文章的骨架提炼一下：
1.对webpack技术栈源头介绍
2.介绍：babel.config.js文件
3.介绍vue.config.js文件
4.对环境配置文件的介绍
总的介绍：基于webpack技术栈开发
1.babel.config.js
2.vue.config.js
.env.development
.env.production
.env.staging
简介：
这些文件，其实是webpack的这个技术栈，要配置的东西
在使用webpack这个技术栈，首先使用npm安装好依赖，这个之前的文章有介绍过，这里就不多说了
vue-cli最后会编译成一个index.html文件
也就是，所有的es6，cs6语法也好，
引入的技术栈也好
都会被编译成压缩后的js文件，html，css文件
我们看一下具体的这些文件的内容是什么：
整体流程图
text
┌─────────────────────────────────────────────────────────────────────┐
│ 构建打包层完整流程 │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ 源码（开发时） 产物（生产时） │
│ │
│ .vue 文件 ┐ │
│ .js 文件 │ │
│ .ts 文件 ├─────────▶ webpack ────────▶ dist/ │
│ .scss/.css 文件 │ + │
│ .png/.jpg 图片 │ Vue CLI ├── index.html │
│ ┘ ├── js/ │
│ │ ├── app.xxx.js│
│ 配置文件（控制构建） │ └── chunk.xxx.js│
│ ├── css/ │
│ babel.config.js ──────────▶ JS 编译规则 │ └── app.xxx.css│
│ vue.config.js ──────────▶ webpack 总配置 └── img/ │
│ .env.xxx ──────────▶ 环境变量 │
│ Dockerfile ──────────▶ 容器化部署 │
│ │
└─────────────────────────────────────────────────────────────────────┘