Webpack打包异常：函数循环调用与匿名函数中断问题

未使用Webpack打包时代码运行正常，接入Webpack构建后出现两个异常：

• listModule函数被循环调用，直至页面被其生成的内容填满；
• 首次调用displayRadioValue函数时，在遍历ele.length环节直接中断，Chrome调试工具跳转到Webpack生成的匿名函数，无法继续执行调用它的resetModule逻辑。

Webpack配置 #

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: {
    index:  './src/index.js',
    modules: './src/modules.js',
    utility: './src/utility.js',
  },
  plugins: [
    new HTMLWebpackPlugin({
      title: 'toDoList',
      template: 'dist\\index.html'
    }),
  ], 
  devtool: 'inline-source-map',
  mode: "development",
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
  optimization: {
    runtimeChunk: 'single',
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
    ],
  },
 };

package.json配置 #

{
    "name": "odintodo",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "css-loader": "^6.7.3",
      "html-webpack-plugin": "^5.5.0",
      "style-loader": "^3.3.1",
      "webpack": "^5.75.0",
      "webpack-cli": "^5.0.0"
    }
  }

问题相关代码（modules.js） #

import { Task } from './index.js'
import { displayRadioValue } from './utility.js'
import { ToDoList } from './index.js'
import { saveToLocalStorage } from './utility.js'
import { updateMainscreen } from './utility.js'
import { updateSubscreen } from './utility.js'
import { updateSidebar } from './utility.js'
import './styles.css'
const newListButton = document.getElementById("newL")
const schedule = [] 
const mover = document.getElementById("mover")
const display = document.getElementById("display")
export const listModule = () => { 
    mover.remove(newListButton)
    var newLocal =`<form class="entryForm" action="#" method="post">
        <h4>Create A tasklist</h4>
        <label for="title">List title:</label>
        <input type="text" id="listName" name="List Title" placeholder="Insert Tasklist title here"><br>
        <button id="submitList">Submit List</button>
        </form>`
    display.innerHTML += newLocal
    var submitListButton = document.getElementById("submitList")
    submitListButton.addEventListener("click", function() {
        taskModule()
    })
return {listModule}
}
export const taskModule = () => {
    var listName = document.getElementById("listName").value
    display.innerHTML = " "
    var newLocal = `<form class="entryForm" action="#" method="post">
            <h2>Create a task</h2>
            <label for="Task Name">Task Name</label>
            <input type="text" id="taskName" name="task Name" placeholder="Insert Task Name Here"><br>
            <label for="taskDescription">Task description</label>
            <input type="text" id="description" name="taskDescription" placeholder="task description here"><br>
            <label for="dueDate">Due date</label>
            <input type="text" id="dueDate" name="dueDate" placeholder="Insert due date here"><br>
            <label for="priority">Priorty:</label><br>
            <input type="radio" id="priority" name="priority" value="High" ><label for="priority">High</label>
            <input type="radio" id="priority" name="priority" value="Medium"><label for="priority">Medium</label>
            <input type="radio" id="priority" name="priority" value="Low"><label for="priority">Low</label>
            <button id="submitTask">Submit</button>
            </form>`
    display.innerHTML += newLocal
    var submitTaskButton = document.getElementById("submitTask")
    submitTaskButton.addEventListener("click", function() {
        resetModule(listName)
    })

    return {listName}, {taskModule}
}
const resetModule = (listName) => {
    let priority = displayRadioValue()
    var title = document.getElementById("taskName").value
    var description = document.getElementById("description").value
    var dueDate = document.getElementById("dueDate").value
    display.innerHTML = " "
    let newTask  = new Task(title, description, dueDate, priority)
    saveToLocalStorage(listName, newTask)
    var activeList = null
    for (const list of schedule) {
        if (list.listName === listName) {
            activeList = list
        }
    }
    // 若未找到同名的ToDoList，则创建新的
    if (activeList === null) {
        activeList = new ToDoList(listName)
        saveToLocalStorage(listName, list)
        schedule.push(activeList)
    }
    activeList.addTask(newTask)
    mover.appendChild(newListButton)
    updateSidebar(newTask, activeList)
    updateMainscreen(activeList, newTask)
    updateSubscreen(newTask)
    return {resetModule}, {schedule}
}

若需要index.js和utility.js的上下文，可补充提供。

内容的提问来源于stack exchange，提问作者seemwavy