How to integrate Webpack.js and XWiki?

To integrate Webpack.js and XWiki there are two options:

• JSFX/SSFX : this is simple but it complicates the XWiki upgrade:
  • You copy the folder generated by webpack to the resources folder within XWiki's (unpacked) WAR 
  • And then use the JSFX (JavaScript File Extension) 
  • And SSFX (Stylesheet File Extension) XWiki plugins to load the JavaScript code and the CSS code respectively.
     See https://www.xwiki.org/xwiki/bin/view/Documentation/DevGuide/FrontendResources/ .

• WebJars : this is more complex but it allows you to create an extension on top of XWiki that doesn't affect XWiki upgrades:
  • First you need to create a Maven module to package the webpack as a WebJar.
    See for instance http://justincalleja.com/2016/04/17/serving-a-webpack-bundle-in-spring-boot/#The_frontend .
    This basically packages your JavaScript code, the CSS and the rest of your static resources as a JAR that can be installed in XWiki as an extension.
  • Then you use XWiki's Extension Manager to install the generated WebJar (advanced search). 
  • Finally you need to create a wiki page with a JSX object that uses RequireJS to load the JavaScript code from the WebJar, using the WebJar API: https://extensions.xwiki.org/xwiki/bin/view/Extension/WebJars+Integration .
  • For the CSS you can use the linkx plugin (see for instance https://github.com/xwiki/xwiki-platform/blob/xwiki-platform-11.7/xwiki-platform-core/xwiki-platform-tree/xwiki-platform-tree-war/src/main/webapp/templates/tree_macros.vm#L25 ).