Question

使用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,
    CLEAR_COMPLEATED_PAGE,
    NOTES_PAGE,
    TODO_PAGE,
    ADD_EDIT_PAGE,
  ];
  pageToDisplay.classlist.remove("hide");
  pagesArray.forEach((page) => {
    if (page !== pageToDisplay) {
      page.classList.add("hide");
    }
  });
}

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

0 个答案: