欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

npm run build:具体

程序员文章站 2022-05-30 09:14:25
...

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分析

部分参考链接

转载于:https://juejin.im/post/5c21a220f265da616a47ae97