Use webpack with Oracle APEX

An interesting feature that appeared with Oracle APEXversion 22.1 is Session Overrides that it allows us to access external files or libraries and to interact with them immediately.

With version 22 the development bar has gone from this

to this

Offering a more meaningful disposition and behavior and new capabilities.

Therefore to override session click on Session => Session Overrides. We will come back to this later in this article.

So, about Webpack,

Webpack is an open-source “module bundler” software tool designed to facilitate the development and management of files and resources. If you are familiar with node js it is very good. But it doesn’t require advanced knowledge of this approach.

You need to install nodejs and NPM

after that you can verify by typing in your terminal :

node -v
npm -v

Create a folder and open terminal on it, Use the npm init command to create a package.json file for your application. This command prompts you for a number of things, including the name and version of your application and the name of the initial entry point file (by default this is index.js). For now, just accept the defaults:

{
"name": "www",
"version": "1.0.0",
"description": "Oracle APEX and its thousand and one wonders",
"main": "app.js",
"scripts": {
"webpack_dev": "env_mode=dev webpack",
"webpack_prod": " env_mode=prod webpack",
"serve_dev": "env_mode=dev webpack serve --hot --port 9000 --open",
"serve_prod": "env_mode=prod webpack serve --hot --port 9000 --open",
"test": "echo "Error: no test specified" && exit 1"
},
"author": "DSOULEMAN",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.18.5",
"@babel/preset-env": "^7.18.2",
"assets": "^3.0.1",
"babel-loader": "^8.2.5",
"css-loader": "^6.7.1",
"file-loader": "^6.2.0",
"mini-css-extract-plugin": "^2.6.1",
"sass": "^1.52.3",
"sass-loader": "^13.0.0",
"style-loader": "^3.3.1",
"url-loader": "^4.1.1",
"webpack": "^5.73.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.2"
}
}

And run

npm install

It will install the necessary node packages, some of which :

babel-loader : Babel is a JavaScript compiler that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.

css-loader : interprets @import and url() like import/require() and will resolve them.

sass-loader : Loads a Sass/SCSS file and compiles it to CSS.

style-loader : Inject CSS into the DOM.

Asset Modules : is a type of module that allows one to use asset files (fonts, icons, etc) without configuring additional loaders.

In the root of your folder, create a file webpack.config.js

You can find my GitHub repository with this structure

This configuration file globally tells webpack to :

  • Use the entry files to generate the app.js bundler file in the /dist directory.
  • And to use specific loaders after evaluating the file extensions.
Command Description
npm run webpack_dev Generate app.js grouping file
npm run webpack_prod Generate the grouping file app.js by minifying it
npm run serve_dev Uses the web server on port 9000 to serve the generated files and reload them automatically after each save
npm run serve_prod Uses the web server on port 9000 to serve the generated minified files and reload them automatically after each save

Once done, I retrieve the link of my bundler file, it will be for example :

http://localhost:9000/dist/app.js

Inside APEX application in development mode I will override my session as follows

Now everything you do in your files is directly integrated into APEX in hot reload mode.