What is the webpack construction method for ABAP system landscape and vue projects?
This article introduces the relevant knowledge of "what is the webpack construction method of ABAP system landscape and vue projects". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!
Netweaver-based ABAP transport route generally has three types of systems: dev,test and prod.
The webpack build settings for Vue front-end projects are similar.
Taking the intelligent service front-end implementation developed by SAP Chengdu Research Institute Digital Innovation Space as an example, two script named dev and build are defined in package.json:
"scripts": {
"dev": "webpack-dev-server-inline-progress-config build/webpack.dev.conf.js"
"start": "npm run dev"
"build": "node build/build.js"
}
Once you run npm run dev, you will observe that the web server is started using the dependency of webpack-dev-server in the dev environment
Of course, the dependency of webpack-dev-server must also be defined in the dependencies area of package.json:
After npm install downloads all the dependencies locally, you can also observe the implementation of the webpack-dev-server.js dependency:
Execute the command line npm run dev, which actually executes the command behavior:
Node "C:Usersi042416Documents clients _ DISCodeSmartServiceFront ode_modules.bin..webpack-dev-serverinwebpack-dev-server.js"-- inline-- progress-- config build/webpack.dev.conf.js
We can see three webpack-related configuration files in the front-end project build folder:
Webpack.base.conf.js
Webpack.dev.conf.js
Webpack.prod.conf.js
You can also see dev and prod environments, development and production systems similar to ABAP. The difference is that the dev environment of vue webpack contains uncompressed code for debugging, while the code of the prod environment is compressed. The ABAP code is the same for development, testing, or production.
The reason for introducing webpack.base.conf.js is also similar to the idea of object-oriented programming to extract some common webpack configurations in dev and prod environments to avoid repeated definitions in dev and prod.
Finally, the webpack configuration content of dev and prod is the common content in webpack.base.conf, plus the union of the configuration content defined in their respective files. Refer to the merge method on line 14, which is provided by the webpack-merge module.
That's all for "what is the webpack build method for ABAP system landscape and vue projects?" Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!
