使用webpack导入功能时出现问题

编程问答 2022-08-11

问题描述

使用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 } from "./domManipulation.js";

但是在index.js vs代码中，只是灰色显示，好像导入文本不起作用。如果我右键单击displayPage并选择go to deFinition vs code，则将我带到该函数，因此我想它知道import语句指向的位置吗？但是，如果我尝试在dist文件夹中的index.html上的chrome控制台中运行该功能，则会得到displayPage(ADD_EDIT_PAGE); VM18270:1 Uncaught ReferenceError: displayPage is not defined at <anonymous>:1:1

请帮助我，就像我两天前开始使用webpack一样！

下面是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"],],};

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,];
  pagetodisplay.classlist.remove("hide");
  pagesArray.forEach((page) => {
    if (page !== pagetodisplay) {
      page.classList.add("hide");
    }
  });
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

exportimportjavascriptwebpackwebpackwebpackwebpack-4