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