基于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的原创文章,请关注公众号"汪子熙":

ABAP system landscape和vue项目webpack构建的最佳实践的更多相关文章

  1. Vue项目架构设计与工程化实践

    摘自Berwin<Vue项目架构设计与工程化实践>github.com/berwin/Blog/issues/14 1.Vue依赖套件 vuex:项目复杂后,用vuex来管理状态 elem ...

  2. VUE项目快速构建

    IDE  :VScode 1.新建项目文件夹 ctrl+~   调出命令板,/IDE找到当前文件夹右键 点击‘在命令提示符中打开’ 安装 node:官网(https://nodejs.org/en/d ...

  3. vue项目的构建过程

    确保已经安装了node和npm 1.安装vue-cli npm i vue-cli -g 2.安装vue-router npm i vue-router --save 3.安装vue-router n ...

  4. Jenkins Vue项目自动构建以及构建后续操作

    Jenkins在linux上的安装教程:http://www.ityouknow.com/springboot/2017/11/11/springboot-jenkins.html 另外,关于在win ...

  5. 创建vue项目 webpack+vue

    # 全局安装 vue-cli $ npm install -g vue-cli # 创建一个基于 "webpack" 模板的新项目 根据提示填写项目信息 && 对项 ...

  6. vue项目 webpack打包后,图片路径是绝对路径

    vue项目,使用webpack打包,虽然在全局把路径改成了相对的路径,但是图片引用的路径还是异常的,解决办法如下: 1.config文件夹下index.js中: assetsPublicPath:&q ...

  7. vue项目webpack打包后有的文件big 问题

    vue项目打包的时候,有的big, 超过1M,   需要进行优化,方法有: 1.  非首屏图片,可以采用懒加载的方式,  如:图片的懒加载,  vue中路由的懒加载 等 2. 各个模块, 采用如sea ...

  8. 本地运行vue项目webpack提示 Compiled successfully

    最近在github下载运行别人的vue项目后,如下图提示编译成功,但项目并没有启动       最开始我以为是端口问题,修改了config-index.js里的port端口,重新运行后依然是上图提示 ...

  9. Vue 项目骨架屏注入与实践

    作为与用户联系最为密切的前端开发者,用户体验是最值得关注的问题.关于页面loading状态的展示,主流的主要有loading图和进度条两种.除此之外,越来越多的APP采用了“骨架屏”的方式去展示未加载 ...

随机推荐

  1. 在Elasticsearch6.X中如何实现去重

    1.前言 Elasticsearch有没有类似mysql的distinct的去重功能呢? 1)如何去重计数? 类似mysql: select distinct(count(1)) from my_ta ...

  2. 33.Docker安装Mysql及用户配置

    mysql在官方上有两个镜像 这个是一个优化过的mysql 使用这个命令 安装mysql 演示最简单的方式去安装mysql: 这种方式安装的用户名没有,密码没有 docker run -d -p 33 ...

  3. 4. docker镜像的概念、管理(查看、下载、删除)

    镜像的概念 镜像是一个包含程序运行必要依赖环境和代码的只读文件,它采用分层的文件系统,将每一次改变以读写层的形式增加到原来的只读文件上.镜像是容器运行的基石. 下图展示的是Docker镜像的系统结构. ...

  4. GridView 中RowDataBound 获取绑定后的各个字段的值

    protected void GridView_dept_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType ...

  5. 30个Python物联网小实验3:使用按钮开灯关灯

    使用按钮开灯关灯 接线图非常简单,LED接GPIO17号口,按钮接GPIO2号口,负极接GND地线. 代码也非常简单: from gpiozero import LED, Button from si ...

  6. Android权限之三共享UID和签名

    http://blog.csdn.net/a345017062/article/details/6236263 共享UID 安装在设备中的每一个Android包文件(.apk)都会被分配到一个属于自己 ...

  7. codeforces590E Birthday【AC自动机+Floyd+匈牙利算法】

    因为没有重复串,所以把有包含关系的串连边之后是个DAG,也就是二分图,就变成求二分图的最大独立集=n-最小点覆盖=n-最大匹配 关于包含关系,建出AC自动机,然后把串放上去找子串,但是如果每次都一路找 ...

  8. 2014-10-31 NOIP模拟赛

        10.30 NOIp  模拟赛   时间 空间 测试点 评测方式 挖掘机(dig.*) 1s 256M 10 传统 黑红树(brtree.*) 2s 256M 10 传统 藏宝图(treas. ...

  9. 通过T4模板解决EF模型序列号的循环引用问题

    在模型的T4模板(如model.tt)中插入如下代码,这样由模板生成的模型代码中的导航属性将自动带有[JsonIgnore]标识,不会被序列化 1. 添加命名空间的引用 找到以下代码,添加using ...

  10. 黑马学习SpringMVC 基本开发步骤