I am new to Webpack. I Have made it by https://createapp.dev/... but when I had installed it then it is throwing many errors please help me...
const webpack = require("webpack")
const path = require('path');
const config = {
entry: [
'react-hot-loader/patch',
'./src/index.js'
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: [
'.js',
'.jsx'
],
alias: {
'react-dom': '@hot-loader/react-dom'
}
},
devServer: {
contentBase: './dist'
},
target:"node"
};
module.exports = config;this is my package.json file
{
"name": "firebase_crud",
"version": "1.0.0",
"description": "",
"main": "index.js",
"keywords": [],
"author": "",
"license": "ISC",
"scripts": {
"clean": "rm dist/bundle.js",
"build-dev": "webpack --mode development",
"build-prod": "webpack --mode production",
"start": "webpack serve --hot --mode development"
},
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-hot-loader": "^4.13.0"
},
"devDependencies": {
"webpack": "^5.50.0",
"webpack-cli": "^4.8.0",
"@babel/preset-react": "^7.14.5",
"babel-loader": "^8.2.2",
"@babel/core": "^7.15.0",
"@babel/preset-env": "^7.15.0",
"@hot-loader/react-dom": "^17.0.1+4.13.0",
"webpack-dev-server": "^4.0.0",
"eslint": "^7.32.0",
"eslint-plugin-react": "^7.24.0"
},
"engines": {
"node": "v14.17.3"
}
}You need to remove contentBase from devServer section. On your screenshot you can find a list of possible options which are applicable for devServer section.
Configuration for devServer is here: https://webpack.js.org/configuration/dev-server/
BTW, Webpack4 had contentBase option https://v4.webpack.js.org/configuration/dev-server/#devservercontentbase
For the Webpack5 use https://webpack.js.org/configuration/dev-server/#directory
