关于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 相关文章推荐
网页前端优化之滚动延时加载图片示例
Jul 13 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
May 14 Javascript
javascript父、子页面交互技巧总结
Aug 08 Javascript
jQuery通过Ajax返回JSON数据
Apr 28 Javascript
jQuery增加自定义函数的方法
Jul 18 Javascript
jQuery实现文本框邮箱输入自动补全效果
Nov 17 Javascript
Bootstrap CDN和本地化环境搭建
Oct 26 Javascript
AngularJS折叠菜单实现方法示例
May 18 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
Jul 05 Javascript
详解Vue取消eslint语法限制
Aug 04 Javascript
Vue快速实现通用表单验证的示例代码
Jan 09 Javascript
ES6中的Javascript解构的实现
Oct 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
PHP 工厂模式使用方法
2010/05/18 PHP
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
PHP获取HTTP body内容的方法
2018/12/31 PHP
JavaScript 拖拉缩放效果
2008/12/10 Javascript
前端开发必须知道的JS之原型和继承
2010/07/06 Javascript
javascript中call和apply方法浅谈
2013/09/27 Javascript
js实现倒计时时钟的示例代码
2013/12/17 Javascript
jquery-syntax动态语法着色示例代码
2014/05/14 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
2014/06/15 Javascript
详解JavaScript的表达式与运算符
2015/11/30 Javascript
JavaScript中的this机制
2016/01/30 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
2016/09/01 Javascript
js实现字符全排列算法的简单方法
2017/05/01 Javascript
vue-cli构建项目使用 less的方法
2017/10/04 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
2017/11/30 Javascript
解决layui的table插件无法多层级获取json数据的问题
2019/09/19 Javascript
js实现简单的日历显示效果函数示例
2019/11/25 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
[03:08]迎霜节狂欢!2018年迎霜节珍藏Ⅰ一览
2018/12/25 DOTA
Python open读写文件实现脚本
2008/09/06 Python
python装饰器decorator介绍
2014/11/21 Python
python中scikit-learn机器代码实例
2018/08/05 Python
Python计算一个点到所有点的欧式距离实现方法
2019/07/04 Python
基于PyTorch的permute和reshape/view的区别介绍
2020/06/18 Python
mac安装python3后使用pip和pip3的区别说明
2020/09/01 Python
python-jwt用户认证食用教学的实现方法
2021/01/19 Python
详解CSS3选择器:nth-child和:nth-of-type之间的差异
2017/09/18 HTML / CSS
教师实习的自我鉴定
2013/10/26 职场文书
护士毕业生自荐信
2014/02/07 职场文书
学校安全责任书范本
2014/07/23 职场文书
幼儿园迎国庆65周年活动策划方案
2014/09/16 职场文书
施工员岗位职责
2015/02/10 职场文书
事业单位个人总结
2015/02/12 职场文书
《葡萄沟》教学反思
2016/02/23 职场文书
python文件目录操作之os模块
2021/05/08 Python
如何利用Python实现n*n螺旋矩阵
2022/01/18 Python