关于vue的npm run dev和npm run build的区别介绍


Posted in Javascript onJanuary 14, 2019

关于vue的npm run dev和npm run build的区别介绍,下面就分享给大家,具体如下:

├─build
│  ├─build.js
│  ├─check-versions.js
│  ├─dev-client.js
│  ├─dev-server.js
│  ├─utils.js
│  ├─vue-loader.conf.js
│  ├─webpack.base.conf.js
│  ├─webpack.dev.conf.js
│  ├─webpack.prod.conf.js
│  └─webpack.test.conf.js
├─config
│  ├─dev.env.js
│  ├─index.js
│  ├─prod.env.js
│  └─test.env.js
├─...
└─package.json

以上是关于bulid与run的所有文件

指令分析

package.json里面

"dev": "node build/dev-server.js",

"build": "node build/build.js",

意思:运行”npm run dev”的时候执行的是build/dev-server.js文件,

运行”npm run build”的时候执行的是build/build.js文件。

build文件夹分析

build/dev-server.js

npm run dev 执行的文件build/dev-server.js文件,执行了:

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

说明: express服务器提供静态文件服务,不过它还使用了http-proxy-middleware,一个http请求代理的中间件。前端开发过程中需要使用到后台的API的话,可以通过配置proxyTable来将相应的后台请求代理到专用的API服务器。

build/webpack.base.conf.js

dev-server依赖的webpack配置是webpack.dev.conf.js文件,

测试环境下使用的是webpack.prod.conf.js

webpack.dev.conf.js中又引用了webpack.base.conf.js

webpack.base.conf.js主要完成了下面这些事情:

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

这个配置里面只配置了.js、.vue、图片、字体等几类文件的处理规则,如果需要处理其他文件可以在module.rules里面配置。

build/webpack.dev.conf.js

在webpack.base.conf的基础上增加完善了开发环境下面的配置,主要包括下面几件事情:

将hot-reload相关的代码添加到entry chunks

  • 合并基础的webpack配置
  • 使用styleLoaders
  • 配置Source Maps
  • 配置webpack插件

build/check-versions.js和build/dev-client.js

最后是build文件夹下面两个比较简单的文件,

dev-client.js似乎没有使用到,代码也比较简单,这里不多讲。

check-version.js完成对node和npm的版本检测

build/utils.js和build/vue-loader.conf.js

webpack配置文件中使用到了utils.js和vue-loader.conf.js这两个文件,utils主要完成下面3件事:

  • 配置静态资源路径
  • 生成cssLoaders用于加载.vue文件中的样式
  • 生成styleLoaders用于加载不在.vue文件中的单独存在的样式文件

vue-loader.conf则只配置了css加载器以及编译css之后自动添加前缀。

build/build.js

构建环境下的配置,

build.js主要完成下面几件事:

  • loading动画
  • 删除创建目标文件夹
  • webpack编译
  • 输出信息

build/webpack.prod.conf.js

构建的时候用到的webpack配置来自webpack.prod.conf.js,该配置同样是在webpack.base.conf基础上的进一步完善。主要完成下面几件事情:

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

说明: webpack插件里面多了丑化压缩代码以及抽离css文件等插件。

config文件夹分析

config/index.js

config文件夹下最主要的文件就是index.js了,

在这里面描述了开发和构建两种环境下的配置,前面的build文件夹下也有不少文件引用了index.js里面的配置。

config/dev.env.js、config/prod.env.js和config/test.env.js

这三个文件就简单设置了环境变量而已,没什么特别的。

这是webpack的基本入门,webpack还有很多插件,还需要去探索

后面写这几个文件的源码解释。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
Mar 06 Javascript
javascript 构造函数强制调用经验总结
Dec 02 Javascript
js获取时间(本周、本季度、本月..)
Nov 22 Javascript
JavaScript中具名函数的多种调用方式总结
Nov 08 Javascript
js与C#进行时间戳转换
Nov 14 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
Jul 21 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
Jan 08 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
May 02 Javascript
Vue自定义指令详解
Jul 28 Javascript
详解node和ES6的模块导出与导入
Feb 19 Javascript
js实现简单音乐播放器
Jun 30 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
用npm-run实现自动化任务的方法示例
Jan 14 #Javascript
详解vue-cli 2.0配置文件(小结)
Jan 14 #Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
Jan 14 #Javascript
vue-cli系列之vue-cli-service整体架构浅析
Jan 14 #Javascript
JS数组求和的常用方法总结【5种方法】
Jan 14 #Javascript
JS实现根据数组对象的某一属性排序操作示例
Jan 14 #Javascript
vue项目中使用vue-i18n报错的解决方法
Jan 13 #Javascript
You might like
刚才在简化php的库,结果发现很多东西
2006/12/31 PHP
PHP 中英文混合排版中处理字符串常用的函数
2007/04/12 PHP
PHP无敌近乎加密方式!
2010/07/17 PHP
PHP工程师VIM配置分享
2015/12/15 PHP
PHP+MySQL实现输入页码跳转到指定页面功能示例
2018/06/01 PHP
Yii2框架配置文件(Application属性)与调试技巧实例分析
2019/05/27 PHP
javascript 冒号 使用说明
2009/06/06 Javascript
JavaScript Event学习第二章 Event浏览器兼容性
2010/02/07 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
2013/07/01 Javascript
兼容主流浏览器的JS复制内容到剪贴板
2014/12/12 Javascript
JavaScript中的this关键字使用方法总结
2015/03/13 Javascript
Jquery实现仿京东商城省市联动菜单
2015/11/19 Javascript
JS函数的定义与调用方法推荐
2016/05/12 Javascript
原生JS查找元素的方法(推荐)
2016/11/22 Javascript
canvas实现爱心和彩虹雨效果
2017/03/09 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
2017/09/16 Javascript
el-select数据过多懒加载的解决(loadmore)
2019/05/29 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
2020/08/12 Javascript
日常整理python执行系统命令的常见方法(全)
2015/10/22 Python
python开发之thread线程基础实例入门
2015/11/11 Python
Flask框架web开发之零基础入门
2018/12/10 Python
python实现感知机线性分类模型示例代码
2019/06/02 Python
如何利用Anaconda配置简单的Python环境
2019/06/24 Python
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
2014/05/03 HTML / CSS
BudgetAir印度:预订航班、酒店和汽车租赁
2019/07/07 全球购物
Windows和Linux动态库应用异同
2016/07/28 面试题
非功能性需求都包括哪些方面
2013/10/29 面试题
生物化学研究助理员求职信
2013/10/09 职场文书
安全环保标语
2014/06/09 职场文书
采购部长岗位职责
2014/06/13 职场文书
2014年公务员工作总结
2014/11/18 职场文书
老公保证书怎么写
2015/02/26 职场文书
装饰施工员岗位职责
2015/04/11 职场文书
植物园观后感
2015/06/11 职场文书
车间班组长竞聘书
2015/09/15 职场文书
一文搞懂redux在react中的初步用法
2021/06/09 Javascript