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

 更新时间:2019年01月14日 11:11:46   作者:Candice&Gladys  
这篇文章主要介绍了关于vue的npm run dev和npm run build的区别介绍,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

关于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还有很多插件,还需要去探索

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

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

相关文章

  • element upload 钩子函数的坑及解决

    element upload 钩子函数的坑及解决

    这篇文章主要介绍了element upload 钩子函数的坑及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue2.0实现选项卡导航效果

    vue2.0实现选项卡导航效果

    这篇文章主要为大家详细介绍了vue2.0实现选项卡导航效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • VUE element-ui 写个复用Table组件的示例代码

    VUE element-ui 写个复用Table组件的示例代码

    本篇文章主要介绍了VUE element-ui 写个复用Table组件的示例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • 关于新建的vue3项目一直提示代码格式警告的问题

    关于新建的vue3项目一直提示代码格式警告的问题

    这篇文章主要介绍了关于新建的vue3项目一直提示代码格式警告的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue出现弹出层时禁止底部页面跟随滑动

    Vue出现弹出层时禁止底部页面跟随滑动

    本文主要介绍了Vue出现弹出层时禁止底部页面跟随滑动,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • VUE3 Vite打包后动态图片资源不显示问题解决方法

    VUE3 Vite打包后动态图片资源不显示问题解决方法

    这篇文章主要给大家介绍了关于VUE3 Vite打包后动态图片资源不显示问题的解决方法,可能是因为在部署后的服务器环境中对中文文件名的支持不完善,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-09-09
  • Vue3中Element Plus Table(表格)点击获取对应id方式

    Vue3中Element Plus Table(表格)点击获取对应id方式

    这篇文章主要介绍了Vue3中Element Plus Table(表格)点击获取对应id方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue3如何实现在style中使用响应式变量

    vue3如何实现在style中使用响应式变量

    vue3已经内置了这个功能啦,可以在style中使用v-bind指令绑定script模块中的响应式变量,这篇文章我们来讲讲vue是如何实现在style中使用script模块中的响应式变量,感兴趣的朋友一起看看吧
    2024-07-07
  • Vuex的各个模块封装的实现

    Vuex的各个模块封装的实现

    这篇文章主要介绍了Vuex的各个模块封装的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • 详解vue中localStorage的使用方法

    详解vue中localStorage的使用方法

    这篇文章主要介绍了详解vue中localStorage的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11

最新评论