Getting Webpack errors - node.js

Question

So I am using webpack for a personal website. I followed a number of guides but none are working so far.
Here is my log:
0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'build' ]
2 info using npm#6.14.8
3 info using node#v12.13.0
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle my-webpack-project#1.0.0~prebuild: my-webpack-project#1.0.0
6 info lifecycle my-webpack-project#1.0.0~build: my-webpack-project#1.0.0
7 verbose lifecycle my-webpack-project#1.0.0~build: unsafe-perm in lifecycle true
8 verbose lifecycle my-webpack-project#1.0.0~build: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/santiagogutierrez/Documents/PersonalProjects/Personal Website/Portafolio/node_modules/.bin:/usr/local/opt/libxml2/bin:/usr/local/opt/libxml2/bin:/usr/local/opt/libressl/bin:/usr/local/opt/openssl/bin:/usr/local/opt/icu4c/sbin:/usr/local/opt/icu4c/bin:/usr/local/opt/icu4c/sbin:/usr/local/opt/icu4c/bin:/usr/local/opt/openssl/bin:/usr/local/opt/libxml2/bin:/usr/local/opt/sqlite/bin:/usr/local/opt/libxml2/bin:/usr/local/opt/icu4c/sbin:/usr/local/opt/icu4c/bin:/usr/local/opt/openssl/bin:/usr/local/opt/openssl/bin:/usr/local/opt/ncurses/bin:/usr/local/opt/icu4c/sbin:/usr/local/opt/icu4c/bin:/usr/local/opt/sqlite/bin:/usr/local/opt/libxml2/bin:/Users/santiagogutierrez/flutter/bin:/usr/local/opt/openssl/bin:/Library/Frameworks/Python.framework/Versions/3.7/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Applications/VMware Fusion.app/Contents/Public:/Library/TeX/texbin:/usr/local/go/bin:/usr/local/share/dotnet:/opt/X11/bin:~/.dotnet/tools:/Library/Apple/usr/bin:/Library/Frameworks/Mono.framework/Versions/Current/Commands:/Applications/Wireshark.app/Contents/MacOS:/Users/santiagogutierrez/.fzf/bin:/Users/santiagogutierrez/Library/Python/3.7/bin
9 verbose lifecycle my-webpack-project#1.0.0~build: CWD: /Users/santiagogutierrez/Documents/PersonalProjects/Personal Website/Portafolio
10 silly lifecycle my-webpack-project#1.0.0~build: Args: [ '-c', 'webpack --config webpack.config.js' ]
11 silly lifecycle my-webpack-project#1.0.0~build: Returned: code: 1 signal: null
12 info lifecycle my-webpack-project#1.0.0~build: Failed to exec build script
13 verbose stack Error: my-webpack-project#1.0.0 build: `webpack --config webpack.config.js`
13 verbose stack Exit status 1
13 verbose stack at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack at EventEmitter.emit (events.js:210:5)
13 verbose stack at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:210:5)
13 verbose stack at maybeClose (internal/child_process.js:1021:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:283:5)
14 verbose pkgid my-webpack-project#1.0.0
15 verbose cwd /Users/santiagogutierrez/Documents/PersonalProjects/Personal Website/Portafolio
16 verbose Darwin 20.1.0
17 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
18 verbose node v12.13.0
19 verbose npm v6.14.8
20 error code ELIFECYCLE
21 error errno 1
22 error my-webpack-project#1.0.0 build: `webpack --config webpack.config.js`
22 error Exit status 1
23 error Failed at the my-webpack-project#1.0.0 build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]
Here is my config file:
const path = require("path");
const HTMLWebPackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry:{
main:"./src/index.js"
},
output:{
path:path.resolve(__dirname,'./dist/'),
filename:'bundle.js'
},
module:{
rules:[
{
test:/\.html$/,
use:[
{
loader: "html-loader",
options:{
minimize:true
}
}
]
},
{
test: /\.css$/,
loader: 'css-loader'
}
]
},
plugins:[
new HTMLWebPackPlugin({
template:"./src/index.html",
source:"./index.html"
}),
]
}
Any help is appreciated.
My index.js is empty except for a console.log statement.
I am not sure what these "child compilation errors" are.
EDIT: I included the wrong log output.

Answer 1

So I figured out the problem. I was using an incompatible version of webpack-dev-server and webpack.
Here is my package file.
"devDependencies": {
"babel-loader": "^8.1.0",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"css-loader": "^4.3.0",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^6.1.1",
"html-loader": "^1.3.2",
"html-plugin": "^0.1.0",
"html-webpack-plugin": "^4.5.0",
"mini-css-extract-plugin": "^1.0.0",
"multi-loader": "^0.1.0",
"style-loader": "^2.0.0",
"terser-webpack-plugin": "^4.2.3",
"webpack": "^5.1.2",
"webpack-cli": "^3.3.4",
"webpack-dev-server": "^3.5.1"
},
"scripts": {
"deploy": "gh-pages -d dist",
"build": "webpack --mode development",
"start": "webpack-dev-server --mode development --open"
},