关于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 相关文章推荐
JQery 渐变图片导航效果代码 漂亮
Jan 01 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
Feb 03 Javascript
关闭ie窗口清除Session的解决方法
Jan 10 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
May 05 Javascript
node.js中的fs.fsyncSync方法使用说明
Dec 15 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
Sep 24 Javascript
js验证框架实现代码分享
May 18 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
Sep 18 Javascript
javascript轮播图算法
Oct 21 Javascript
Javascript 实现简单计算器实例代码
Oct 23 Javascript
AngularJS 应用模块化的使用
Apr 04 Javascript
JS中Promise函数then的奥秘探究
Jul 30 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
搜索和替换文件或目录的一个好类--很实用
2006/10/09 PHP
php 地区分类排序算法
2013/07/01 PHP
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
实例详解jQuery表单验证插件validate
2016/01/18 Javascript
JavaScript表单验证开发
2016/11/23 Javascript
html5+canvas实现支持触屏的签名插件教程
2017/05/08 Javascript
JavaScript标准对象_动力节点Java学院整理
2017/06/27 Javascript
React入门教程之Hello World以及环境搭建详解
2017/07/11 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
2017/10/31 Javascript
Vue之Vue.set动态新增对象属性方法
2018/02/23 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
2018/03/13 Javascript
create-react-app修改为多页面支持的方法
2018/05/17 Javascript
react.js组件实现拖拽复制和可排序的示例代码
2018/08/20 Javascript
vue项目前端埋点的实现
2019/03/06 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
2019/04/22 Javascript
ES6 Array常用扩展的应用实例分析
2019/06/26 Javascript
vue组件 keep-alive 和 transition 使用详解
2019/10/11 Javascript
JavaScript 实现轮播图特效的示例
2020/11/05 Javascript
[47:18]完美世界DOTA2联赛循环赛 IO vs FTD BO2第一场 11.05
2020/11/06 DOTA
二种python发送邮件实例讲解(python发邮件附件可以使用email模块实现)
2013/12/03 Python
Python中atexit模块的基本使用示例
2015/07/08 Python
Python 实现简单的电话本功能
2015/08/09 Python
Python上传package到Pypi(代码简单)
2016/02/06 Python
python用pickle模块实现“增删改查”的简易功能
2017/06/07 Python
基于pycharm导入模块显示不存在的解决方法
2018/10/13 Python
python读取Excel表格文件的方法
2019/09/02 Python
jupyter 导入csv文件方式
2020/04/21 Python
python 对一幅灰度图像进行直方图均衡化
2020/10/27 Python
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
日本整理专家Marie Kondo的官方在线商店:KonMari
2020/06/29 全球购物
三下乡活动方案
2014/01/31 职场文书
生产部厂长助理职位说明书
2014/03/03 职场文书
优秀的应届生自荐信
2014/05/23 职场文书
会议欢迎词范文
2015/01/27 职场文书
介绍信样本
2015/01/31 职场文书
导游词之黄帝陵景区
2019/09/16 职场文书