How to inject a script tag using webpack4

Question

I´m trying to insert dynamically a script tag:

let div = document.createElement('div')
let scriptTag = document.createElement('script')
scriptTag.type = "text/javascript";
scriptTag.innerHTML = `
function closeModal() {
document.getElementById('contact-edit-modal${contact.id ? '-'+contact.id : ''}').remove()
}
function saveChanges('${createContact}'){
debugger
if ('${createContact}') {
  // creating new contact

  let userData = window.app.getUser()
  if (userData){
    let apiKey = userData.apiKey
    if (apiKey){
      let clientId = userData.clientId
      if (clientId) {
        gapi.client.init({... `

div.append(scriptTag) 
document.body.append(div)

and it is in fact injecting the script tag inside the DOM tree

but the debugger keyword is not making the interpreter stop

My webpack.config.js is in this link:

https://pastebin.com/x3GqrdWG

Answer 1

I am not 100% sure on this one but I think that debugger statements are parsed only at initial load meaning that it's not possible to add debugger statement dynamically.

BTW why are you adding tag in a div? Why not just append it on window.body?