webpack搭建的vue2项目目录结构概述

先从最外层走起（根目录文件）：

1. babelrc：作为项目babel的配置文件（Babel 是一个 JavaScript 编译器，作为我们项目对js的编译），可以将我们项目es5以上的语法编译成大多浏览器都支持的es5语法等功能，还可以在这里配置一些框架的按需加载（如element-ui）
2. .editorconfig：项目中编辑代码风格
3. .gitignore : 用于git的忽略文件配置（我们使用git提交的时候，有些文件是不需要提交的，如node模块的node_modules文件夹、打包成功的dist文件夹等）
4. .postcssrc.js: 用于对style的less语法支持配置
5. index.html: 项目的首页，即我们编写的代码会通过这个文件显示给浏览器
6. package.json package-lock.json: 这个就不用多说了吧，大家都懂是项目包的依赖文件
7. README.md: 展现在GitHub上的描述文件

build文件夹

1. build.js: 作为项目打包的时候（npm run build）的入口文件，通过这个js将整体项目打包
2. check-versions.js：用于版本node和npm版本的检测
3. dev-client.js

• 引入eventsource-polyfill模块
• 监听dev-server.js中webpack-hot-middleware发布的事件并作相应的处理

4.dev-server.js

• 检查npm与node的版本
• 引入相关插件和配置
• 创建express服务器和webpack编译器
• 配置开发中间件（webpack-dev-middleware）和热重载中间件（webpack-hot-middleware）
• 挂载代理服务和中间件
• 配置静态资源
• 启动服务器监听特定端口（8080）
• 自动打开浏览器并打开特定网址（localhost:8080）

5. utils.js：用于项目中关于loader器的引用和项目title、icon等设置
6. vue-loader.conf.js：因为项目是基于vue的，所以，需要一个vue-loader来识别.vue后缀的文件，这个文件，就是vue-loader的配置文件
7. webpack.base.conf.js：项目webpack的基础配置文件
8. webpack.dev.conf.js：开发环境下的webpack配置文件
9. webpack.prod.conf.js：生产环境下的webpack配置文件

config文件夹

1. dev.env.js、prod.env.js：用于配置项目的环境变量
2. index.js：用于webpack的一些配置信息

node_modules文件夹

项目包存储的地方

src文件夹

1. assets文件夹：这里放置项目的模块静态资源，如css，js还有图片、字体
2. components文件夹：使用vue的都知道，vue是模块化的框架，我们将页面中的元素分模块编写，从而提高代码修改的方便性以及重用的效率，这个文件夹内就是我们项目的模块存放地址
3. router文件夹：vue-router让我们能处理vue的路由，从而更佳的使用component，这个文件夹内就是个vue-router的配置文件
4. APP.vue：作为项目的根组件，也就是我们直接吧这个组件装到index.html中进行渲染
5. main.js：作为webpack项目的入口文件，在这个文件夹内，我们是可以引用静态资源以及对整体vue的配置

static文件夹
用于存放在整体项目的静态资源，如图片，字体等

参考：https://blog.csdn.net/crazy_jialin/article/details/80433020