Inhalte werden mit Webpack nicht in div angezeigt ⇐ HTML

[Anonymous]

Ich versuche, Text und ein Bild mithilfe von Webpack in ein Div zu drucken, aber es scheint nicht zu funktionieren. Es werden nur die Schaltflächen angezeigt, der Text und das Bild jedoch nicht. Bitte schauen Sie sich meinen Code an und prüfen Sie, ob Fehler vorliegen.
index.js

Code: Select all

import image from "./image.jpg";
const div = document.querySelector('.content');
const h1 = document.createElement('h1');
h1.innerText = 'Restaurant Page';
div.appendChild(h1);
const img = document.createElement('img');
img.src = image;
div.appendChild(img);
const p = document.createElement('p');
p.innerText = 'Welcome to my restaurant.';
div.appendChild(p);

template.html

Code: Select all

Document




Home
Menu
About

webpack.config.js

Code: Select all

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
mode: "development",
entry: "./src/index.js",
output: {
filename: "main.js",
path: path.resolve(__dirname, "dist"),
clean: true,
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/template.html",
})
],
module: {
rules: [
{
test: /\.html$/i,
loader: "html-loader",
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: "asset/resource",
}
]
}
};

package.json

Code: Select all

{
"name": "restaurant-page",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"type": "commonjs",
"devDependencies": {
"css-loader": "^7.1.2",
"html-loader": "^5.1.0",
"html-webpack-plugin": "^5.6.5",
"style-loader": "^4.0.0",
"webpack-cli": "^6.0.1",
"webpack-dev-server": "^5.2.2"
}
}

Ich habe HtmlWebpackPlugin, HTML-Loader, CSS-Loader und Style-Loader installiert.
styles.css ist eine leere CSS-Datei
Es liegt ein nicht erfasster Laufzeitfehler vor:

Code: Select all

Uncaught runtime errors:
×
ERROR
Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> import image from "./image.jpg";
| const div = document.querySelector('.content');
| const h1 = document.createElement('h1');
Error: Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.  See https://webpack.js.org/concepts#loaders
> import image from "./image.jpg";
| const div = document.querySelector('.content');
| const h1 = document.createElement('h1');
at eval (webpack://restaurant-page/./src/index.js?:1:8)
at ./src/index.js (https://upgraded-robot-4x5jr6r94xq3q576-8080.app.github.dev/main.js:167:1)
at __webpack_require__ (https://upgraded-robot-4x5jr6r94xq3q576-8080.app.github.dev/main.js:200:32)
at https://upgraded-robot-4x5jr6r94xq3q576-8080.app.github.dev/main.js:1288:37
at https://upgraded-robot-4x5jr6r94xq3q576-8080.app.github.dev/main.js:1290:12

Der Code zeigte den Inhalt an, bis ich ihn in das Javascript verschoben habe, und jetzt wird er nicht mehr angezeigt.