Integration revolution slider with webpack

Question

We are trying to integrate a HTML template with angular 5 (jhipster) using webpack. The template uses revolution slider and work perfectly as HTML. Our main concern is to be able to add revolution slider plugin to webpack. We were able to add an entry point to my script as we can see in the image below.

entry: {
        polyfills: './src/main/webapp/app/polyfills',
        global: './src/main/webapp/content/scss/global.scss',
        main: './src/main/webapp/app/app.main',
        script: './src/main/webapp/app/website/v/js/script'
    },

Then we added require tags to import revolution dependencies to our script (script.js) as follows:

require('./jquery.themepunch.revolution.min');
require('./jquery.themepunch.tools.min');
require('./extensions/revolution.extension.actions.min');
require('./extensions/revolution.extension.carousel.min');
require('./extensions/revolution.extension.kenburn.min');
require('./extensions/revolution.extension.layeranimation.min');
require('./extensions/revolution.extension.migration.min');
require('./extensions/revolution.extension.navigation.min');
require('./extensions/revolution.extension.parallax.min');
require('./extensions/revolution.extension.slideanims.min');
require('./extensions/revolution.extension.video.min');
require('./main-slider-script');

The slider code was meant to work without dependencies in HTML version but when using webpack the jquery.themepunch.tools.min keeps asking for TweenLite dependency, so we had to resolve TweenLite in webpack.common.js as next:

 resolve: {
        extensions: ['.ts', '.js'],
        modules: ['node_modules'],
        alias: {
            "TweenLite": "gsap/src/uncompressed/TweenLite"
        }
    }

but we are getting this error

Uncaught ReferenceError: punchgs is not defined
    at jQuery.fn.init.revolution (jquery.themepunch.revolution.min.js?7c26:8)
    at HTMLDocument.eval (main-slider-script.js?aca9:12)
    at mightThrow (jquery.js?eedf:3583)
    at process (jquery.js?eedf:3651)
    at ZoneDelegate.invokeTask (zone.js?6524:421)
    at Zone.runTask (zone.js?6524:188)
    at ZoneTask.invokeTask (zone.js?6524:495)
    at ZoneTask.invoke (zone.js?6524:484)
    at timer (zone.js?6524:2065)

And we couldn't figure out why we are getting this error. But there are two anomalies that we notice in our app.

The first one, in the script.bundle.js generated by webpack. there are some redundant variables.

/* WEBPACK VAR INJECTION */(function(jQuery, global) {var WEBPACK_AMD_DEFINE_FACTORY, WEBPACK_AMD_DEFINE_ARRAY, WEBPACK_AMD_DEFINE_RESULT;var WEBPACK_AMD_DEFINE_ARRAY, WEBPACK_AMD_DEFINE_RESULT;var WEBPACK_AMD_DEFINE_FACTORY, WEBPACK_AMD_DEFINE_ARRAY, WEBPACK_AMD_DEFINE_RESULT;var WEBPACK_AMD_DEFINE_FACTORY, WEBPACK_AMD_DEFINE_ARRAY, WEBPACK_AMD_DEFINE_RESULT;var WEBPACK_AMD_DEFINE_FACTORY, WEBPACK_AMD_DEFINE_ARRAY, WEBPACK_AMD_DEFINE_RESULT;var WEBPACK_AMD_DEFINE_FACTORY, WEBPACK_AMD_DEFINE_ARRAY, WEBPACK_AMD_DEFINE_RESULT;

the second one, if we add console.log() to jquery.themepunch.tools.min, we get an error.

jquery.themepunch.tools.min.js?bfe2:19 Uncaught TypeError: Cannot read property 'log' of undefined
    at Object.eval (jquery.themepunch.tools.min.js?bfe2:19)
    at eval (jquery.themepunch.tools.min.js:159)
    at Object../src/main/webapp/app/website/v/js/jquery.themepunch.tools.min.js (script.bundle.js:97)
    at __webpack_require__ (manifest.bundle.js:713)
    at fn (manifest.bundle.js:118)
    at Object.eval (script.js?1cd8:2)
    at eval (script.js:668)
    at Object../src/main/webapp/app/website/v/js/script.js (script.bundle.js:111)
    at __webpack_require__ (manifest.bundle.js:713)
    at fn (manifest.bundle.js:118)

so we think there is a problem with the way webpack is processing the file jquery.themepunch.tools.min.js.

Best regards.

Have you tried following instructions found in your README.md about vendor.ts and vendor.css? — Gaël Marziou, Mar 26 '18 at 20:48
Thank u Gael for your answer. We removed script.js and added our code to vendor.ts but the problem persiste. The instructions in the README.md file are about npm packages but there is none for revolution slider. We are trying to use third party js file with webpack. We couldn t find out the solution. But our guess right now is that missed the right configuration or the right loader to import the jquery.themepunch.tools.min file in webpack. — CyberPunk27, Mar 26 '18 at 21:34
Have the same issue here... If you have resolved it please share how. Best regards! — Georgi Arnaudov, Apr 09 '18 at 17:17

CyberPunk27 · Accepted Answer · 2018-04-10T12:08:30.590

Well we didn t find a 100% solution but we managed to migrate webpack with revolution slider.

So the solution was to add the js files relative to revolution slider to the header the traditional way, and the way to do that is to use add-asset-html-webpack-plugin.

new AddAssetHtmlPlugin([
    { filepath: require.resolve('../src/main/webapp/app/website/v/js/jquery') },
    { filepath: require.resolve('../src/main/webapp/app/website/v/js/jquery.themepunch.revolution.min') },
    { filepath: require.resolve('../src/main/webapp/app/website/v/js/jquery.themepunch.tools.min') },
    { filepath: require.resolve('../src/main/webapp/app/website/v/js/extensions/revolution.extension.actions.min') },
    { filepath: require.resolve('../src/main/webapp/app/website/v/js/extensions/revolution.extension.kenburn.min') },
    { filepath: require.resolve('../src/main/webapp/app/website/v/js/extensions/revolution.extension.layeranimation.min') },
    { filepath: require.resolve('../src/main/webapp/app/website/v/js/extensions/revolution.extension.migration.min') },
    { filepath: require.resolve('../src/main/webapp/app/website/v/js/extensions/revolution.extension.navigation.min') },
    { filepath: require.resolve('../src/main/webapp/app/website/v/js/extensions/revolution.extension.parallax.min') },
    { filepath: require.resolve('../src/main/webapp/app/website/v/js/extensions/revolution.extension.slideanims.min') },
    { filepath: require.resolve('../src/main/webapp/app/website/v/js/extensions/revolution.extension.video.min') },
    { filepath: require.resolve('../src/main/webapp/app/website/v/js/main-slider-script.js') },
    { filepath: require.resolve('../src/main/webapp/app/website/v/js/app.js') }
    ])

this plugin will add js files to the header of your index.html.

Then we had to downgrade the version of the revolution slider. cause the animation effects of the tp-caption caused js errors. We didn t look through it yet. but for now we will stick with old revolution version. If you guys find how to use this method with the latest revolution version let us know please.

You also need to create empty(or not) .js.map for every js file you are going to add to the plugin.

The add-asset-html-webpack-plugin plugin link: https://www.npmjs.com/package/add-asset-html-webpack-plugin

Hope this will help anyone.

Best regards.

score 1 · Answer 2 · answered Oct 29 '19 at 06:00

Try this solution, it works for me:

Install jquery and gsap using npm or yarn
In webpack configuration, create a chunk, that contains helper and revolution slider itself:

...
entry: {
    'bundle': './src/js/index.js',
    'revolution' : [
        './src/js/revo-helper',
        './src/js/jquery.themepunch.revolution.5.4.8.1',
     ]
...

In src/js/revo-helper.js, place the following code:

// Import jquery
import $ from "jquery";

// Import green sock
import {_gsScope} from  'gsap';

// Propaginate it to Revolution Slider
window.punchgs = window.GreenSockGlobals  = _gsScope.GreenSockGlobals;

// Make jQuery be visible globally for Revolution Slider
global.jQuery = $;

// Activate slider on document loaded as usual
var revapi1084;
$(document).ready(function () {
      revapi1084 = $("#rev_slider_container").show().revolution({
            // ...
            // ...
      });
}

Use this chunk on pages, where you wish to place your slider: (in webpack.config.js, take notice on 'revolution' in chunks section)

....
new HtmlWebpackPlugin({
    filename: 'index.html',
    template: './src/pug/pages/index.pug',
    chunks: ['common', 'revolution']
}),
...

Hope, this will be helpful.

PS: Take a notice, that jquery.themepunch.tools is not included, seems to be working fine without it. If you need to use some functionality from it, remove any sections that belong to gsap inside that file.

Integration revolution slider with webpack

2 Answers2