专栏首页Jerry的SAP技术分享ABAP system landscape和vue项目webpack构建的最佳实践
原创

ABAP system landscape和vue项目webpack构建的最佳实践

基于Netweaver的ABAP transport route一般都有dev,test和prod三种类型的系统。

而Vue前端项目的webpack build设置也类似。

SAP成都研究院数字创新空间开发的智能服务前端实现为例, 在package.json里定义了名为dev和build两个script:

"scripts": {

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

"start": "npm run dev",

"build": "node build/build.js"

}

一旦运行npm run dev,会观察到在dev环境下使用了webpack-dev-server这个依赖启动了web服务器

当然webpack-dev-server这个依赖也必须定义在package.json的dependencies区域里:

npm install把所有依赖下载到本地后,也能观察到webpack-dev-server.js这个依赖的实现:

执行命令行npm run dev, 实际上执行的命令行为:

node "C:Usersi042416Documents_DISCodeSmartServiceFront ode_modules.bin..webpack-dev-serverinwebpack-dev-server.js" --inline --progress --config build/webpack.dev.conf.js

我们在前端项目build文件夹里能看到三个和webpack相关的配置文件:

  • webpack.base.conf.js
  • webpack.dev.conf.js
  • webpack.prod.conf.js

这里也能看到dev和prod环境,类似ABAP的开发和生产系统。区别是vue webpack的dev环境包含的是未压缩过的代码,方便调试,而prod环境的代码是压缩过后的。而ABAP无论是开发,测试还是生产,代码都相同。

之所以要引入webpack.base.conf.js, 也是类似面向对象的编程思想,把dev和prod环境一些通用的webpack配置抽取出来,避免在dev和prod里重复定义。

最终dev和prod的webpack配置内容,是webpack.base.conf里的通用内容,加上各自专属文件里定义的配置内容的并集, 参考第14行的merge方法,由webpack-merge模块提供。

当然如果大家还不了解什么是Webpack,可以参考这篇简书文章,来自zhangwang,写得相当详细。

入门Webpack,看这篇就够了

WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。

要获取更多Jerry的原创文章,请关注公众号"汪子熙":

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • webpack-dev-server启动后, localhost:8080返回index.html的原理

    webpack-dev-server是一个采用Node.js Express实现的微型服务器, 内部使用webpack-dev-middleware来响应发送到...

    Jerry Wang
  • ABAP system landscape和vue项目webpack构建的最佳实践

    版权声明:本文为博主汪子熙原创文章,未经博主允许不得转载。 https://jerry.bl...

    Jerry Wang
  • webpack-dev-server启动后,localhost:8080返回index.html的原理

    webpack-dev-server是一个采用Node.js Express实现的微型服务器, 内部使用webpack-dev-middleware来响应发送到...

    Jerry Wang
  • Vue.js前后端同构方案之准备篇:代码优化

    目前Vue.js的火爆不亚于当初的React,本人对写代码有洁癖,代码也是艺术。此篇是准备篇,工欲善其事,必先利其器。我们先在代码层面进行优化,对我们完成整个技...

    王鹤
  • Android SystemUI(二):启动流程和初始化

    菜天哥哥
  • 亚马逊丰富云服务种类欲扩大市场领先优势

    国外媒体近日发表文章称,亚马逊已经在全球云计算市场占据领先,不过它并没因此而放慢前进脚步。它正寻求进一步丰富它的云服务种类,强化行业领先地位。 以下是文章主要内...

    静一
  • 【系统篇】ArchLinux系统安装

    本教程为最新安装Linux的教程,想看更详细可以到我B站主页看视频教程 本教程参考自 https://wiki.archlinux.org/index.php/...

    huanhao
  • 分区表可以使用不同BLOCK_SIZE的表空间吗?

    编辑手记:Oracle数据库中有两种类型的块,标准块和非标准块。非标准块的引入给数据库的管理带来了方便,但在使用的时候也有一些限制。本文将会详细解读块大小对于分...

    数据和云
  • jquery 手风琴效果

    <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-eq...

    用户5760343
  • ASP.NET MVC5+EF6+EasyUI 后台管理系统(80)-自由桌面

    系列目录 前言 这次我们来做一个有趣的事情,有朋友跟做了很远,找我要自由桌面的代码,这次我们将演示自由桌面的代码。 自由桌面:用户可以随意增删改桌面的布局、...

    用户1149182

扫码关注云+社区

领取腾讯云代金券