Webpack externals help needed

Question

I have created an application (using vue and webpack) that needs two urls to access REST services. These urls are different per deployment. So I would realy like to have an external configuration file (maybe JSON) that stores those urls.

I did some research and I came upon webpack externals. Added externals to my configuration file:

module.exports = {

...

  externals: {
    tryout: path.resolve(__dirname, "./test.js")
  }

}

test.js is really simple --> export default {url1 : 'https://bla', url2: 'https://bla2'}

From the vue file where I need this file I call:

import Tryout from 'tryout'

console.log(Tryout)

This causes my application to show a blank screen. No errors in the console nor in the npm console screen.

Not sure what is happening. couple of questions:

• I am using dev server not sure where to place the test.js file I placed it here : __dirname, "./test.js" so this is in my build directory...
• Should I load it in my index.html file like an external libary load?
• does anybody has a step by step example? Couldn`t find it online..

This should be simple but no clue since I am not getting any error or message...

Any help would be really helpful!