vue的npm run dev和npm run build

1 篇文章 0 订阅

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

 npm run devnpm run build
执行的文件

npm run dev 执行的文件build/dev-server.js文件。

build/dev-server.js文件,执行了:
1.检查node和npm的版本
2.引入相关插件和配置
3.创建express服务器和webpack编译器
4.配置开发中间件(webpack-dev-middleware)和热重载中间件(webpack-hot-middleware)
5.挂载代理服务和中间件
6.配置静态资源
7.启动服务器监听特定端口(8080)
8.自动打开浏览器并打开特定网址(localhost:8080)
说明: express服务器提供静态文件服务,
    不过它还使用了http-proxy-middleware,
    一个http请求代理的中间件。
    前端开发过程中需要使用到后台的API的话,
    可以通过配置proxyTable来将相应的后台请求代理到专用的API服务器。

npm run build 执行的是build/build.js文件。

build/build.js构建环境下的配置,主要完成下面几件事:
1.loading动画
2.删除创建目标文件夹
3.webpack编译
4.输出信息

依赖的webpack配置文件dev-server依赖的webpack配置是webpack.dev.conf.js文件,在webpack.base.conf的基础上增加完善了开发环境下面的配置,
主要包括下面几件事情:
1.将hot-reload相关的代码添加到entry chunks
2.合并基础的webpack配置
3.使用styleLoaders
4.配置Source Maps
5.配置webpack插件
构建的时候用到的webpack配置来自webpack.prod.conf.js,该配置同样是在webpack.base.conf基础上的进一步完善。
主要完成下面几件事情:
1.合并基础的webpack配置
2.使用styleLoaders
3.配置webpack的输出
4.配置webpack插件
5.gzip模式下的webpack插件配置
6.webpack-bundle分析
说明: webpack插件里面多了丑化压缩代码以及抽离css文件等插件。
webpack基础配置webpack.base.conf.js主要完成了下面这些事情:
1.配置webpack编译入口
2.配置webpack输出路径和命名规则
3.配置模块resolve规则
4.配置不同类型模块的处理规则
这个配置里面只配置了.js、.vue、图片、字体等几类文件的处理规则,
如果需要处理其他文件可以在module.rules里面配置。

 

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值