vue文件目录结构详解(二)---package.json,webpack配置，项目配置，项目依赖等

1.package.json

node配置文件

[scripts]字段看一下在执行npm run dev 和npm run build时做了什么

 "name": "wheelsfactory",
  "version": "1.0.0",
  "description": "轮子工厂--一个分享优秀的vue,angular组件的网站 http://www.wheelsfactory.cn",
  "scripts": {
        "dev": "node build/dev-server.js",
        "start": "node build/dev-server.js",
        "build": "node build/build.js"
  }

当我们执行npm run dev时，首选执行的是dev-server.js
当我们执行打包项目`npm run build`时，首选执行的是build.js

dev-server.js内容

引入配置文件
引入相关插件
创建express实例
配置webpack-dev-middleware和webpack-hot-middleware
配置静态资源路径，并挂到express服务上
启动服务器，并判断是否自动打开默认浏览器
监听端口

---

2.build文件夹

webpack相关配置文件

build.js内容

webpack编译
输出信息

check-versions.js

检查npm,nodejs版本

utils.js

配置资源路径，配置css加载器

vue-loader.conf.js

配置css加载器等

webpack.base.conf.js

webpack基本配置
配置编译入口和输出路径
模块resolve的规则
配置不同类型模块的处理规则

webpack.dev.conf.js

用于开发的webpack设置
合并基础的webpack配置
使用styleLoaders
配置Source Maps
配置webpack插件

webpack.prod.conf.js

用于打包的webpack设置
合并基础的webpack配置
配置webpack的输出
配置webpack插件
配置gzip模式
配置webpack-bundle-analyzer，分析打包后生成的文件结构

---

3.config文件夹

vue项目配置

index.js

4.node_modules

项目依赖