Getting Webpack errors

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 [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]~prebuild: [email protected]
6 info lifecycle [email protected]~build: [email protected]
7 verbose lifecycle [email protected]~build: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~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 [email protected]~build: CWD: /Users/santiagogutierrez/Documents/PersonalProjects/Personal Website/Portafolio
10 silly lifecycle [email protected]~build: Args: [ '-c', 'webpack --config webpack.config.js' ]
11 silly lifecycle [email protected]~build: Returned: code: 1  signal: null
12 info lifecycle [email protected]~build: Failed to exec build script
13 verbose stack Error: [email protected] 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 [email protected]
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 [email protected] build: `webpack --config webpack.config.js`
22 error Exit status 1
23 error Failed at the [email protected] 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"
  },