ERROS com WEBPACK-DEV-SERVER com a versão 5 do WEBPACK

[Cyber-Phantom]

Pessoal, tô com um problema que já procurei em tudo que é lugar e não encontrei nenhuma solução. Se alguém puder ajudar, agradeço imensamente.

Estou usando o Webpack 5 e rodando o webpack-dev-server e está me gerando vários erros que não sei como resolver. Sou jr e estou aprendendo ainda, desculpem desde já o incomodo.

Quando executo: npm run build, tudo funciona perfeitamente.

Mas quando executo: npm start, o mundo vem abaixo. O webpack-dev-server gera "92 errors have detailed information that is not shown." (segue o arquivo de log de erros que gerei: errors.log)

Já procurei em todos os lugares possíveis pra ver se alguém tinha relatado o problema e não encontrei nada em lugar algum.

Aliás, nem sei como perguntar sobre o problema.

Agradeço desde já qualquer ajuda!!

Segue a estrutura do sistema:

PACKAGE.JSON

{
  "name": "teste-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server webpack",
    "build": "cross-env NODE_ENV=production webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "cross-env": "^7.0.3",
    "css-loader": "^6.8.1",
    "css-minimizer-webpack-plugin": "^5.0.1",
    "mini-css-extract-plugin": "^2.7.6",
    "node-sass": "^9.0.0",
    "sass-loader": "^13.3.2",
    "style-loader": "^3.3.3",
    "terser-webpack-plugin": "^5.3.9",
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  }
}

WEBPACK.CONFIG.JS

const modoDev = process.env.NODE_ENV !== 'production'
const webpack = require('webpack')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin')
const TerserWebpackPlugin = require('terser-webpack-plugin')

module.exports = {
    mode: modoDev ? 'development' : 'production',
    // mode: 'production',
    entry: './src/principal.js',
    output: {
        filename: 'principal.js',
        path: __dirname + '/public'
    },
    devServer: {
        static: './public',
        port: 9000
    },
    optimization: {
        minimizer: [
            new TerserWebpackPlugin({
                parallel: true,
                terserOptions: {
                    ecma: 8
                },
            }),
            new CssMinimizerWebpackPlugin({})
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'estilo.css'
        })
    ],
    module: {
        rules: [{
            test: /\.s?[ac]ss$/,
            use: [
                MiniCssExtractPlugin.loader,
                // 'style-loader',  //adiciona CSS a DOM injetando a tag <style>
                'css-loader',       // interpreta @import, url()...
                'sass-loader'       // interpreta @import, url()...
            ]
        }, {
            test: /\.(png|svg|jpg|gif)$/,
            type: 'asset/resource'
            // use: ['url-loader']
            // use: ['file-loader']
        }]
    }
}

errors.log

[ninetails]

Tenta essa solução aqui:

https://bobbyhadz.com/blog/module-not-found-error-cant-resolve-assert

[Cyber-Phantom]

Oi, Nine! Muita gentileza sua em responder. Vou tentar com certeza. Grato, mais uma vez pela atenção!!

[Cyber-Phantom]

Funcionou maravilhosamente bem.

Gratidão mais uma vez pela ajuda. :)

[barraponto]

faz tempo que eu não uso webpack, mas vc pode ver no exemplo da configuração que o script de start deles é diferente do seu. tenta usar webpack serve no lugar de webpack-dev-server webpack

[Cyber-Phantom]

Beleza, meu camarada. Vou estudar esse link. Grato imensamente pela atenção, meu camarada! Tmj!