Hey there, I'm having trouble viewing output in my Chrome inspect element. Here are the files I am working with:
const path = require("path");
module.exports = {
entry: ["./src/js/index.js"],
output: {
path: path.resolve(__dirname, "dist/js"),
filename: "bundle.js"
}
};
{
"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"
}
}
console.log("Export data");
export default 23;
// Global app controller
import num from "./test";
console.log(`${num} from test`);
<!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>
The folder for my project is named FORKIFY. It contains three subfolders: dist, src , nodemodules, and also has three files: pacakage-lock.json, pacakage.json, webpack.config.js. See directory image here. Could you help me figure out why my console is empty? I was following this video tutorial to write my code.
Can you point out where the problem might be occurring and which file may need adjustments? Do I need to make changes in my webpack config file?