如何使用webpack4注入脚本标记

Question

我正在尝试动态插入一个脚本标记：

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)

实际上，它是在DOM树中注入script标记

​

​

但是debugger关键字并没有使解释器停止

​

​

我的webpack.config.js在此链接中：

https://pastebin.com/x3GqrdWG

Answer 1

这一点我不是百分之百确定，但我认为调试器语句在初始加载时只解析，这意味着不可能动态添加调试器语句。

顺便说一下，为什么要在div中添加标签？为什么不直接把它附加到window.body上呢？