对于第五层：构建打包层。我们看看有哪些源文件是值得我们注意的

这里先对整体文章的骨架提炼一下：
1.对webpack技术栈源头介绍
2.介绍：babel.config.js文件
3.介绍vue.config.js文件
4.对环境配置文件的介绍

总的介绍：基于webpack技术栈开发

1.babel.config.js
2.vue.config.js
3.
.env.development
.env.production
.env.staging

简介：
这些文件，其实是webpack的这个技术栈，要配置的东西
在使用webpack这个技术栈，首先使用npm安装好依赖，这个之前的文章有介绍过，这里就不多说了

vue-cli最后会编译成一个index.html文件
也就是，所有的es6，cs6语法也好，
引入的技术栈也好
都会被编译成压缩后的js文件，html，css文件

我们看一下具体的这些文件的内容是什么：

整体流程图

┌─────────────────────────────────────────────────────────────────────┐
│                        构建打包层完整流程                              │
├─────────────────────────────────────────────────────────────────────┤
│                                                                       │
│  源码（开发时）                      产物（生产时）                     │
│                                                                       │
│  .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      ──────────▶ 容器化部署                               │
│                                                                       │
└─────────────────────────────────────────────────────────────────────┘

转载自CSDN-专业IT技术社区

原文链接：https://blog.csdn.net/safsdfooo/article/details/160896849