Reveal.js: How to use it plugins with webpack?

[yangzhiyao]

when i use some plugins chrome say "Uncaught ReferenceError: head is not defined"
and i try to add to my main.js:
var head = require("headjs");

it's return:
Error: Cannot find module 'headjs'

how can i make the headjs to package js file or i must direct use it from my html?

[bnjmnt4n]

The head.js library must be defined globally.

[rparree]

I used import "reveal.js/lib/js/head.min"

But i am now having problems with the dependencies as they refer to source files:

dependencies: [
  {
    src: '/lib/components/reveal.js/lib/js/classList.js', condition: function () {
    return !document.body.classList;
  },
  .... 
]

[bekicot]

I also plan it to be used in rails application but it seems like it is just hard to do it in assets manifest.
Is there a way to use the plugin, without dynamically load it?
I will always require the files anyway, I think the path option should be omitted in this case.

[KatSick]

have same problem as @rparree

[bsautel]

I could get plugins work with webpack. I do not really build plugins as webpack bundles but I copy the raw plugin files to the build directory.

Here is an example to get the notes plugin work:

1. Load the head library in the main Javascript file as suggested by @bnjmnt4n :

import 'reveal.js/lib/js/head.min';

1. Expose the global Reveal variable thanks to the expose loader in the webpack loaders configuration:

{
                test: require.resolve('reveal.js'),
                use: {
                    loader: 'expose-loader',
                    options: 'Reveal'
                }
            }

1. Copy the files thanks to the copy-webpack-plugin in the webpack plugins configuration:

new CopyWebpackPlugin([
            copyRevealJsFiles('plugin/notes/*'),
            copyRevealJsFiles('plugin/markdown/*'),
            copyRevealJsFiles('css/reveal.css', 'css'),
            copyRevealJsFiles('css/theme/white.css', 'css/theme'),
            copyRevealJsFiles('lib/font/source-sans-pro/source-sans-pro.css', 'lib/font/source-sans-pro')
        ])

Here is the copyRevealJsFiles function definition:

function copyRevealJsFiles(pattern, outputDirectory = '') {
    return {
        from: `node_modules/reveal.js/${pattern}`,
        to: outputDirectory,
        transformPath(targetPath) {
            return targetPath.replace('node_modules/reveal.js/', '');
        }
    }
}

1. To get it work with webpack-dev-server, also load the write-file-webpack-plugin in the webpack plugins configuration:

new WriteFilePlugin()

1. Load the plugin as explained in the documentation in the main Javascript file:

Reveal.initialize({
    dependencies: [
        {src: 'plugin/notes/notes.js', async: true}
    ]
});

This workaround works, but it would be nice if reveal.js could be fully compatible with Javascript bundlers.

[rbi]

At least for the syntax highlight plugin there is a much simpler solution:

~
npm install --save-dev script-loader
~

and

~~~
...
import 'reveal.js/lib/css/zenburn.css'
import 'script-loader!reveal.js/plugin/highlight/highlight'
hljs.initHighlightingOnLoad();

Reveal.initialize({ });
~~~

I bet the other plugins work too but I didn't try.

[bsautel]

Thanks @rbi! This workaround is more elegant than mine, but I think that it would not work for the notes plugin for instance since loading it is not as simple as loading the Javascript file. Indeed, the notes plugin needs the plugin/notes/notes.htmlfile to be present. Do you have a more elegant solution for that?