npm run 流程图

配置文件的流程图

主要配置文件概述

"sit": "cross-env NODE_ENV=production env_config=sit node build/build.js",
"uat": "cross-env NODE_ENV=production env_config=uat node build/build.js",
"prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
复制代码

cross-env NODE_ENV=production env_config=sit cross-env 是设置环境变量的命令 NODE_ENV=production 是指生产环境 env_config是指具体的那个生产环境

build.js

loading效果 webpack编译 输出信息

check-versions.js

检测node版本 检测npm版本

dev-client.js

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

dev-server.js

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

utils.js

设置静态文件的公共路径，用于修改src属性的值 css加载器的相关配置 对.vue文件之外的css文件或css预处理器文件进行处理

vue-loader-conf.js

根据当前的开发环境对webpack中的vue-loader进行配置

webpack.base.conf.js

path模块不用说大家肯定都知道，是理一些路径的，无论是在这个配置里还其它配置中，这个是必不可少的
util是对vue-loader对于css预编译一些提取的工具模块，因为对于个人开发而言，在里面提供了，sass,less,stylus,possCss等一系列预编译解析的loader config是对开发环境和生产环境的一系列不同参数的，路径等配置
vueLoaderConfig也是同样基础生产环境和开发环境对vue-loader进行的配置 配置webpack编译入口 配置webpack输出路径、名称和静态文件路径 配置不同模块的处理规则与命名规则

webpack.dev.conf.js

将hot-reload相关的代码添加到entry chunks 合并基础的webpack配置 使用styleLoaders 配置Source Maps 配置webpack插件

webpack.prod.conf.js

合并基础的webpack配置 使用styleLoaders 配置webpack的输出 配置webpack插件 gzip模式下的webpack插件配置 webpack-bundle分析

部分参考链接

• vue-cli中webpack配置之build.js
• vue-cli中webpack配置读之check-versions.js
• vue-cli中webpack配置之dev-client.js
• vue-cli中webpack配置之dev-server.js
• vue-cli中webpack配置之utils.js
• vue-cli中webpack配置之vue-loader-conf.js
• vue-cli中webpack配置之webpack.base.conf.js
• vue-cli中webpack配置之webpack.dev.conf.js
• vue-cli中webpack配置之webpack.prod.conf.js