npm run build-dev criou um arquvo chamado main.js e não bundle.js | Webpack: trabalhando com módulos na sua webapp

E o arquivo é praticamente vazio comparado com o mostrado na aula

main.js

/******/ (() => { // webpackBootstrap
/******/     "use strict";
var __webpack_exports__ = {};
/******/ })()

webpack.config.js:

const { Module } = require("webpack");
const path = require("path"); 

Module.exports = {
  entry: "./app/src/js/app.js", 
  output: {
    filename: "bundle.js", 
    path: path.resolve(__dirname, "app/dist"),
  },
};

package.json:

{
  "name": "alurabank",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "lite-server --baseDir=app",
    "build-dev": "webpack --mode development --config webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "lite-server": "^2.6.1",
    "webpack": "^5.28.0",
    "webpack-cli": "^4.5.0"
  }
}

Olá Erike, tudo bem contigo?

Parece que você está enfrentando um problema com o comando npm run build-dev e o arquivo resultante main.js em vez de bundle.js. O arquivo main.js que foi gerado está vazio em comparação com o que você esperava.

Analisando seus arquivos, vejo que há um erro no arquivo webpack.config.js. A exportação do módulo está incorreta devido a um erro de digitação. Em vez de Module.exports, deveria ser module.exports (com "m" minúsculo). A letra "m" deve ser minúscula para corresponder à declaração do objeto module em JavaScript.

Aqui está o trecho corrigido do arquivo webpack.config.js:

const { Module } = require("webpack");
const path = require("path"); 

module.exports = {
  entry: "./app/src/js/app.js", 
  output: {
    filename: "bundle.js", 
    path: path.resolve(__dirname, "app/dist"),
  },
};

Após corrigir o erro, tente executar novamente o comando npm run build-dev e verifique se o arquivo bundle.js é gerado corretamente e contém o código esperado. Certifique-se de que todos os outros arquivos relevantes, como app/src/js/app.js, estejam presentes e contenham o código necessário para o pacote.

Lembrando que é sempre importante verificar se todas as dependências estão atualizadas. Certifique-se de que as versões do webpack e do webpack-cli especificadas no arquivo package.json sejam compatíveis e adequadas para o seu projeto.

Espero que isso ajude a resolver o problema e a gerar o arquivo desejado corretamente. Se você encontrar mais dificuldades ou tiver outras dúvidas, fique à vontade para perguntar!

Se você tiver mais perguntas ou precisar de assistência adicional, não hesite em me perguntar. Estou aqui para ajudar.

Abraços e bons estudos.

Mergulhe em programação