ABAP system landscape和vue项目webpack构建的最佳实践 ABAPweb-packjavascriptvuevuejs
基于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的原创文章，请关注公众号"汪子熙":