关于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 相关文章推荐
js文件Cookie存取值示例代码
Feb 20 Javascript
jQuery中的read和JavaScript中的onload函数的区别
Aug 27 Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
Aug 01 Javascript
JS数组返回去重后数据的方法解析
Jan 03 Javascript
jQuery实现页面倒计时并刷新效果
Mar 13 Javascript
基于Bootstrap table组件实现多层表头的实例代码
Sep 07 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
Dec 01 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
Sep 25 Javascript
Vue 列表上下过渡效果的实例代码
Jun 25 Javascript
Vue商品控件与购物车联动效果的实例代码
Jul 21 Javascript
Vue2.0实现简单分页及跳转效果
Jul 29 Javascript
用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/11/25 PHP
PHP比较运算符的详细介绍
2015/09/29 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
在视频前插入广告
2006/11/20 Javascript
基于jquery的一个图片hover的插件
2010/04/24 Javascript
来自国外的页面JavaScript文件优化
2010/12/08 Javascript
Javascript面向对象编程(三) 非构造函数的继承
2011/08/28 Javascript
js Html结构转字符串形式显示代码
2011/11/15 Javascript
jquery实现简单的无缝滚动
2015/04/15 Javascript
jquery悬浮提示框完整实例
2016/01/13 Javascript
JavaScript中的this使用详解
2016/07/27 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
2016/09/14 Javascript
js实现3d悬浮效果
2017/02/16 Javascript
从零学习node.js之详解异步控制工具async(八)
2017/02/27 Javascript
删除table表格行的实例讲解
2017/09/21 Javascript
浅谈在react中如何实现扫码枪输入
2018/07/04 Javascript
[03:49]2016完美“圣”典风云人物:AMS专访
2016/12/06 DOTA
Python中的元类编程入门指引
2015/04/15 Python
Python的消息队列包SnakeMQ使用初探
2016/06/29 Python
Python实现根据日期获取当天凌晨时间戳的方法示例
2019/04/09 Python
python暴力解压rar加密文件过程详解
2019/07/05 Python
为什么相对PHP黑python的更少
2020/06/21 Python
python 读txt文件,按‘,’分割每行数据操作
2020/07/05 Python
Python如何实现大型数组运算(使用NumPy)
2020/07/24 Python
使用css如何制作时间ICON方法实践
2012/11/12 HTML / CSS
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
2018/09/19 HTML / CSS
施华洛世奇水晶荷兰官方网站:SWAROVSKI荷兰
2017/05/12 全球购物
英国品牌男装折扣网站:Brown Bag
2018/03/08 全球购物
英国电信商店:BT Shop
2019/12/17 全球购物
口腔工艺技术专业毕业生自荐信
2013/09/27 职场文书
班长自荐书范文
2014/02/11 职场文书
搞笑婚礼主持词
2014/03/13 职场文书
工程售后服务方案
2014/06/08 职场文书
python数据可视化JupyterLab实用扩展程序Mito
2021/11/20 Python
解决MySQL报“too many connections“错误
2022/04/19 MySQL
Apache自带的ab压力测试工具的实现
2022/07/23 Servers