Can I use webpack with openUI5?

Question

Can I use webpack and its bundling-features with an openUI5 project? How?

I am aware of openui5_preload and gulp-ui5-preload but I want more than just putting all my code in one preloader-file: I like to "walk" all used dedendencies as well and bundle my whole openUI5-project in one file.

So far I was able to get webpack running with UI5:

npm i -g webpack

webpack.config.js:

module.exports = {
  entry: {
    packed: './webapp/Component.js'
  },
  output: {
    path: './built',
    filename: '[name].built.js'
  },
  resolve: {
    modulesDirectories: [
      'node_modules',
      'bower_components'
    ]
  }
};

and run webpack a file built/packed.built.js is created. But it just contains my component.js-file. Why?

Answer 1

UI5 uses its own implementations/modifications of CommonJS and AMD: jQuery.sap.require()/jQuery.sap.declare() and the newer and now recommended AMD sap.ui.require()/sap.ui.declare().

Webpacks dependecy walking supports CommonJS and AMD (1). But i would guess that it does not understand the UI5 Modules. Without that it cannot extract the dependencies of each module. So its getting stuck at your Component.js...

Answer 2

I've just come across a presentation from UI5Con mentioning OpenUI5 Webpack support.

You install it with: npm install --save-dev openui5-webpack-plugin

Sample config taken from the project documentation:

const OpenUI5Plugin = require("openui5-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  resolve: {
    modules: [
      "node_modules/@openui5/sap.m/src",
      "node_modules/@openui5/sap.ui.core/src",
      "node_modules/@openui5/sap.ui.core/src/sap/ui/thirdparty",
      "node_modules/@openui5/themelib_sap_belize/src",
      "node_modules"
    ],
  },
  plugins: [
    new OpenUI5Plugin({
      modulePath: 'my/resource/module/path',
      libs: ['sap.ui.core', 'sap.m'],
      translations: ['en', 'de'],
      theme: ['sap_belize'],
      requireSync: [],
      manifest: "./manifest.json"
    }),
    new CopyWebpackPlugin([
      {
        context: path.resolve(__dirname, "node_modules/@openui5/sap.ui.core/src"),
        from: {
          glob: "sap/ui/core/themes/base/fonts/**",
        },
      },
      {
        context: path.resolve(__dirname, "node_modules/@openui5/themelib_sap_belize/src"),
        from: {
          glob: "sap/ui/core/themes/sap_belize_plus/fonts/**",
        },
      }
    ]),
  ]
}