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 Frontend Resources page .
• 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 Serving a Webpack bundle in Spring Boot .
    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: WebJars API .
  • For the CSS you can use the linkx plugin (see for instance tree_macros.vm#L25).