How to integrate Webpack.js and XWiki?

Last modified by Camelia Andrei on 2020/04/24

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).

Get Connected