Webpack sources inside vendor js

Question

I'm new to webpack and I am trying to convert my angularjs project to it. I am using an online template which has custom js files with direct source mentions in it, like this:

$('.login-bg').backstretch([
            "../assets/bg1.jpg",
            "../assets/bg2.jpg",
            "../assets/bg3.jpg"
            ], {
              fade: 1000,
              duration: 8000
            }
        );

I am including these js files using the script-loader module like this:

import 'script-loader!../assets/scripts/script.js'

I would like a solution for webpack to include those images when exporting my project, do you have any idea what is the best way to achieve that?

Also, am I importing these files the best way? I have seen so many complicated solutions and this was the easiest and quickest to get working.

Thanks!

Edit 1:

Found a workaround that I don't really like, but has to work for the time being. Import the image on the angularjs controller and pass it to the custom script file when loading the page.

Controller.js

import img1 from "Assets/velona/login/bg1.jpg"
...
Script.init(img1,img2,img3);

If someone has a better idea, I am willing to improve this.

Webpack sources inside vendor js

0 Answers