I am brand new to this field and I apologize in advance for any mistakes. Currently, I am working on a node.js project using webpack and HTML loader. To test the project, I am utilizing the dev server dependency to run it locally. All models, views, and template index.html files are located in the 'src' folder, while the webpack config, package.json, and server.js files can be found in the root directory. The webpack HTML loader is responsible for loading the index.html file into the 'dist' folder, which contains a 'css' folder with style.css inside. Everything functions smoothly in development mode, and I can successfully run the page on my localhost. However, issues arise when I attempt to run "npm run start" (which involves "node server.js"). Subsequently, when I try to access the page on localhost, the styling seems to break, even though the interactive functionalities of the page work as intended. I suspect that the 'href' linking the CSS in the index.html file may be incorrect. Does anyone have insights on what could be wrong in my code? Below, I have shared all the images and code snippets that I am currently utilizing.
https://i.sstatic.net/EzzJx.png
https://i.sstatic.net/zCyL2.png
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: ['./src/js/index.js'],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/bundle.js'
},
devServer:{
contentBase: './dist'
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/index.html'
})
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use:{
loader: 'babel-loader'
}
}
]
}
}
package.json file
{
"name": "forkify",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development",
"dev-start": "webpack-dev-server --mode development --open",
"heroku-postbuild": "webpack --mode production",
"start": "node server.js"
},
"author": "Sayeedur Rahman",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.9.0",
"@babel/preset-env": "^7.9.5",
"babel-loader": "^8.1.0",
"html-webpack-plugin": "^4.2.0",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.1",
"webpack-dev-server": "^3.10.3"
},
"dependencies": {
"axios": "^0.19.2",
"core-js": "^3.6.5",
"express": "^4.17.1",
"fractional": "^1.0.0",
"regenerator-runtime": "^0.13.5",
"uniqid": "^5.2.0"
},
"engines": {
"node": "12.16.1",
"npm": "6.13.4"
}
}
server.js file
const express = require('express');
const path = require('path');
const port = process.env.PORT || 8080;
const app = express();
app.use(express.static(__dirname + '/dist'));
app.get('/', (req, res) =>{
res.sendFile(path.resolve(__dirname, '/dist', 'index.html'))
});
app.listen(port);
console.log(`server started on ${port}`);
index.html file section
<!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">
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,700" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
<title>forkify // Search over 1,000,000 recipes</title>
</head>