控制台chrome检查元素中没有输出(Webpack配置)
你好，我看不到我的铬元素输出。以下是我的文件。 https://i.stack.imgur.com/fhn3E.jpg https://i.stack.imgur.com/TOuXj.jpg
const path = require("path");
module.exports = {
entry: ["./src/js/index.js"],
output: {
path: path.resolve(__dirname, "dist/js"),
filename: "bundle.js"
}
};
https://i.stack.imgur.com/SulP0.jpg
{
"name": "forkify",
"version": "1.0.0",
"description": "forkify project",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
},
"author": "Gaurav Yadav guided by Jonas",
"license": "ISC",
"devDependencies": {
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10"
}
}
https://i.stack.imgur.com/os28l.jpg
console.log("Export data");
export default 23;
https://i.stack.imgur.com/GEiAn.jpg
// Global app controller
import num from "./test";
console.log(`${num} from test`);
https://i.stack.imgur.com/T6m8u.jpg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>test</title>
</head>
<body>
<script>
src = "js/bundle.js";
</script>
</body>
</html>
我的项目文件夹名是FORKIFY。有三个子文件夹 dist，src，nodemodules和三个文件 pacakage-lock.json，pacakage.json，webpack.config.js。目录图像目录。请让我知道为什么我的控制台是空的？我在跟踪这段视频进行编码 问题在哪里，在哪个文件里？？我需要更改我的webpack配置文件吗？ https://www.youtube.com/watch?v=sBEryysS1Tg&list=PL15NLmjJalxydhO9orvXv_yvgZEfrDQvX&index=127
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
根据您提供的信息，您的项目结构和配置文件看起来是正确的。但是，有几个点需要注意，这可能是导致控制台输出为空的原因：
-
模块导入导出问题： 在您的代码片段中，
test.js文件使用了默认导出export default 23;，而在主应用控制器文件（未提供具体文件名，但假设是通过import num from "./test";导入的）中，您正尝试导入这个值并打印出来。这种用法本身没有问题。 -
Webpack 配置： 您的
webpack.config.js看起来配置正确，它指定了入口文件为./src/js/index.js并且输出到dist/js/bundle.js。确保index.js或者任何其他被直接或间接导入到index.js的文件中包含了对test.js中导出值的实际使用逻辑，并且该逻辑包含在执行流中。 -
运行模式： 您的
package.json文件中定义了两个脚本命令：dev和build。请确认您正在使用正确的命令运行项目。如果您希望在开发模式下看到实时输出，应使用npm run dev。开发模式不会像生产模式那样进行代码压缩和优化，更适合调试。 -
浏览器与服务器： 如果您是在浏览器环境下查看控制台，需要确保
bundle.js已经正确地链接到 HTML 文件中。检查您的 HTML 文件是否有一个如<script src="dist/js/bundle.js"></script>的标签来引入打包后的 JavaScript 文件。 -
错误处理： 查看 Webpack 编译过程中的输出日志，是否有任何警告或错误信息。这可以通过运行
npm run dev或npm run build命令时观察终端输出获得。 -
图片无法查看： 您提供的是一系列图片链接，我作为文本基础的AI无法直接查看图片内容。如果以上建议未能解决问题，请详细描述图片中的具体内容，或者提供更具体的代码段和错误信息。
综上所述，首先检查您的 index.js 是否正确导入并使用了 test.js 中的导出值，然后确保您以开发模式运行项目，并检查浏览器中的页面源码以确认 bundle.js 被正确引用。如果还有问题，可以进一步检查 Webpack 编译日志寻找线索。
