前几天面试问了基础文件的作用，只说了几个，特来整理一下

一、主体结构

[code]├─build
├─config
├─dist
├─node_modules
├─src
│ ├─assets
│ ├─components
│ ├─router
│ ├─App.vue
│ ├─main.js
├─static
├─.babelrc
├─.editorconfig
├─.gitignore
├─.postcssrc.js
├─index.html
├─package-lock.json
├─package.json
└─README.md

1、 package.json

package.json来制定名单，需要哪些npm包来参与到项目中来，npm install/uninstall 命令根据这个配置文件增减来管理本地的安装包。

devDependencies和dependencies的区别： devDependencies里面的插件只用于开发环境，不用于生产环境，即辅助作用，打包的时候需要，打包完成就不需要了。而dependencies是需要发布到生产环境的，自始至终都在。比如wepack等只是在开发中使用的包就写入到devDependencies，而像vue这种项目全程依赖的包要写入到dependencies 

file-loader和url-loader的区别：以图片为例，file-loader可对图片进行压缩，但是还是通过文件路径进行引入，当http请求增多时会降低页面性能，而url-loader通过设定limit参数，小于limit字节的图片会被转成base64的文件，大于limit字节的将进行图片压缩的操作。总而言之，url-loader是file-loader的上层封装。 

2、.postcssrc.js

.postcssrc.js文件其实是postcss-loader包的一个配置，在webpack的旧版本可以直接在webpack.config.js中配置，现版本中postcss的文档示例独立出.postcssrc.js，里面写进去需要使用到的插件

3、 .babelrc

该文件是es6解析的一个配置

4、src内文件

我们开发的代码都存放在src目录下，根据需要我们通常会再建一些文件夹。比如pages的文件夹，用来存放页面让components文件夹专门做好组件的工作；api文件夹，来封装请求的参数和方法；store文件夹，使用vuex来作为vue的状态管理工具，我也常叫它作前端的数据库等。

①、assets文件：脚手架自动回放入一个图片在里面作为初始页面的logo。平常我们使用的时候会在里面建立js，css，img，fonts等文件夹，作为静态资源调用 
②、components文件夹：用来存放组件，合理地使用组件可以高效地实现复用等功能，从而更好地开发项目。一般情况下比如创建头部组件的时候，我们会新建一个header的文件夹，然后再新建一个header.vue的文件夹 
③、router文件夹：该文件夹下有一个叫index.js文件，用于实现页面的路由跳转，具体使用请
④、App.vue：作为我们的主组件，可通过使用开放入口让其他的页面组件得以显示。 
⑤、main.js：作为我们的入口文件，主要作用是初始化vue实例并使用需要的插件，小型项目省略router时可放在该处

5、其他文件

①、.editorconfig：编辑器的配置文件 
②、.gitignore：忽略git提交的一个文件，配置之后提交时将不会加载忽略的文件 
③、index.html：页面入口，经过编译之后的代码将插入到这来。 
④、package.lock.json：锁定安装时的包的版本号，并且需要上传到git，以保证其他人在npm install时大家的依赖能保证一致 
⑤、README.md：可此填写项目介绍 
⑥、node_modules：根据package.json安装时候生成的的依赖（安装包）

二、config文件夹

1、config/dev.env.js

config内的文件其实是服务于build的，大部分是定义一个变量export出去

[code]'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
NODE_ENV: '"development"'
})

2、config/prod.env.js

当开发是调取dev.env.js的开发环境配置，发布时调用prod.env.js的生产环境配置

[code]'use strict'
module.exports = {
NODE_ENV: '"production"'
}

3、config/index.js

[code]'use strict'
const path = require('path')

module.exports = {
dev: {
// 开发环境下面的配置
assetsSubDirectory: 'static',//子目录，一般存放css,js,image等文件
assetsPublicPath: '/',//根目录
proxyTable: {},//可利用该属性解决跨域的问题
host: 'localhost', // 地址
port: 8080, //端口号设置，端口号占用出现问题可在此处修改
autoOpenBrowser: false,//是否在编译（输入命令行npm run dev）后打开http://localhost:8080/页面，以前配置为true，近些版本改为false，个人偏向习惯自动打开页面
errorOverlay: true,//浏览器错误提示
notifyOnErrors: true,//跨平台错误提示
poll: false, //使用文件系统(file system)获取文件改动的通知devServer.watchOptions
devtool: 'cheap-module-eval-source-map',//增加调试，该属性为原始源代码（仅限行）不可在生产环境中使用
cacheBusting: true,//使缓存失效
cssSourceMap: true//代码压缩后进行调bug定位将非常困难，于是引入sourcemap记录压缩前后的位置信息记录，当产生错误时直接定位到未压缩前的位置，将大大的方便我们调试
},

build: {
// 生产环境下面的配置
index: path.resolve(__dirname, '../dist/index.html'),//index编译后生成的位置和名字，根据需要改变后缀，比如index.php
assetsRoot: path.resolve(__dirname, '../dist'),//编译后存放生成环境代码的位置
assetsSubDirectory: 'static',//js,css,images存放文件夹名
assetsPublicPath: '/',//发布的根目录，通常本地打包dist后打开文件会报错，此处修改为./。如果是上线的文件，可根据文件存放位置进行更改路径
productionSourceMap: true,
devtool: '#source-map',//①
//unit的gzip命令用来压缩文件，gzip模式下需要压缩的文件的扩展名有js和css
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
bundleAnalyzerReport: process.env.npm_config_report
}
}

三、build文件夹

1、build/build.js

该文件作用，即构建生产版本。package.json中的scripts的build就是node build/build.js，输入命令行npm run build对该文件进行编译生成生产环境的代码。

2、build/check-version.js

该文件用于检测node和npm的版本，实现版本依赖

3、build/utils.js

utils是工具的意思，是一个用来处理css的文件。

4、vue-loader.conf.js

该文件的主要作用就是处理.vue文件，解析这个文件中的每个语言块（template、script、style),转换成js可用的js模块。

5、webpack.base.conf.js

webpack.base.conf.js是开发和生产共同使用提出来的基础配置文件，主要实现配制入口，配置输出环境，配置模块resolve和插件等

6、webpack.dev.conf.js

7、webpack.prod.conf.js