Use JQuery plugin with Webpack

Question

I am trying to use the plugin Galleria with Webpack. Without Webpack galleria can be used as:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="galleria/galleria-1.4.min.js"></script>

<script>
  (function() {
    Galleria.loadTheme('https://cdnjs.cloudflare.com/ajax/libs/galleria/1.5.7/themes/classic/galleria.classic.min.js');
    Galleria.run('.galleria');
  }());
</script>

The theme can also be loaded manually instead of using the method loadTheme:

<link rel=”stylesheet” type=”text/css” href=”https://cdnjs.cloudflare.com/ajax/libs/galleria/1.5.7/themes/fullscreen/galleria.classic.min.css” />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>   
<script src=”https://cdnjs.cloudflare.com/ajax/libs/galleria/1.5.7/galleria.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/galleria/1.5.7/themes/classic/galleria.classic.min.js”></script>

<script>
  (function() {
    Galleria.run('.galleria');
  }());
</script>

With WebPack I added the following code to Index.js:

import galleria from 'galleria';

import '../../node_modules/galleria/dist/themes/classic/galleria.classic.css';
import '../../node_modules/galleria/dist/themes/classic/galleria.classic.js';

window.Galleria = galleria; 

(function() {
  Galleria.run('.galleria');
}());

When I run it I get the errors:

No theme CSS loaded.

Init failed: Galleria could not find the element "undefined".

Any idea how to use Galleria with Webpack?

Answer 1

Created a simple repo with webpack and galleria for you.
Steps are:

1. Use shimming as documented here:

            {
                test: /galleria.js$/,
                loader: "imports-loader?this=>window"
            },

2. Add jquery and galleria as dependencies to your project: npm i -S jquery galleria
3. Use loadTheme and run Galleria methods:

import * as $ from 'jquery';
import galleria from 'galleria';

window.Galleria = galleria;
window.jQuery = $;

Galleria.loadTheme('node_modules/galleria/dist/themes/classic/galleria.classic.js');
Galleria.run('.galleria');

To see project working please run npm run start.

UPD:
To copy minified theme files you can use CopyWebpackPlugin:

1. npm i -D copy-webpack-plugin
2. Add it to webpack plugins:

plugins: [
        new CopyWebpackPlugin([
            { from: 'node_modules/galleria/dist/themes/classic/galleria.classic.min.js', to: 'assets/galleria.classic.js' },
            { from: 'node_modules/galleria/dist/themes/classic/galleria.classic.min.css', to: 'assets/galleria.classic.css' },
        ])
]

3. Change path in loadTheme call: Galleria.loadTheme('assets/galleria.classic.js');

UPD2:
Updated repo with webpack imports usage. Please see difference in this PR or this branch. Main changes are:

1. We still need galleria.classic.css file to be used with copy-webpack-plugin and loaded as <link rel="stylesheet" type="text/css" href="assets/galleria.classic.css"> because I found in source code that css can be loaded only through link or script tags or dynamically (loadTheme call), otherwise No theme css loaded will be printed.
   2. But then our javascript code becomes pretty simple. Also I removed webpack rule with imports-loader and used it in inline style.

import * as $ from 'jquery';
import * as Galleria from 'galleria'
import 'imports-loader?define=>false!./node_modules/galleria/src/themes/classic/galleria.classic';

Galleria.run('.galleria');