Javascript 使用webpack导入函数时出现问题

使用webpack，我试图将一个函数从domManipulation.js导出到index.js，它们都在src文件夹中

export function displayPage(pageToDisplay) {
  pageToDisplay.classlist.remove("hide");
  pagesArray.forEach((page) => {
    if (page !== pageToDisplay) {
      page.classList.add("hide");
    }
  });
}

使用

import{displayPage}来自“/dommarization.js”

但是在index.js中，vs代码会变灰，好像导入文本不起作用一样。如果我右键单击
displayPage
并选择go to definition vs code，则会将我带到函数，这样我想它就知道import语句指向哪里了？但是，如果我尝试在chrome控制台的dist文件夹index.html上运行函数，我会得到
displayPage（ADD\u EDIT\u页面）；VM18270:1未捕获引用错误：未在以下位置定义显示页面：1:1

请帮助我，我两天前就开始使用这个网页了

下面是webpack配置，我试图从中导出函数的文件中的完整代码，以及chrome中显示的模块中的代码

const path = require("path");

module.exports = {
  // watch: true,
  mode: 'development',
  entry: "./src/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

你能把
网页配置也放进去吗？还要检查构建是否成功not@HidaytRahman完成：-）
const DELETE_TODO_PAGE = document.getElementById("deleteTodoPage");
const CLEAR_COMPLEATED_PAGE = document.getElementById("clearCompleatedPage");
const NOTES_PAGE = document.getElementById("notesPage");
const TODO_PAGE = document.getElementById("todoPage");
const ADD_EDIT_PAGE = document.getElementById("addEditPage");

let pagesArray = [
  DELETE_TODO_PAGE,
  CLEAR_COMPLEATED_PAGE,
  NOTES_PAGE,
  TODO_PAGE,
  ADD_EDIT_PAGE,
];

export function displayPage(pageToDisplay) {
  pageToDisplay.classlist.remove("hide");
  pagesArray.forEach((page) => {
    if (page !== pageToDisplay) {
      page.classList.add("hide");
    }
  });
}


__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "displayPage", function() { return displayPage; });
const DELETE_TODO_PAGE = document.getElementById("deleteTodoPage");
const CLEAR_COMPLEATED_PAGE = document.getElementById("clearCompleatedPage");
const NOTES_PAGE = document.getElementById("notesPage");
const TODO_PAGE = document.getElementById("todoPage");
const ADD_EDIT_PAGE = document.getElementById("addEditPage");

function displayPage(pageToDisplay) {
  let pagesArray = [
    DELETE_TODO_PAGE,
    CLEAR_COMPLEATED_PAGE,
    NOTES_PAGE,
    TODO_PAGE,
    ADD_EDIT_PAGE,
  ];
  pageToDisplay.classlist.remove("hide");
  pagesArray.forEach((page) => {
    if (page !== pageToDisplay) {
      page.classList.add("hide");
    }
  });
}