Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

175
Visualizações
Using Webpack with an existing vanilla JS project results in an `Cannot GET /` error

I have a file structure like this for my simple JS web application:

myproject
│   README.md
│   .gitignore
|   index.html    
└───style
│   │   style.css
│   │   style.scss
│   │   style.css.map   
│   
└───js
    │   javascript1.js
    │   javascript2.js
    |   javascript3.js
│   
└───assets
    │   someimage.png
    │   someimage2.png
    |   ...

My workflow so far has been to compile the SCSS to CSS and then just open index.html in a browser. I'd like to make the workflow more efficient (automatic SCSS compilation, hot or live reload, JS minimization, etc.), so I am trying to work with some build tool like Webpack. I followed a guide and added, for example, this file webpack.config.js to the root of my project:

module.exports = {
  entry: [
    './js/javascript1.js',
    './js/javascript2.js',
    './js/javascript3.js',
    './style/style.css'
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "script-loader"
        }
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader",
            options: {
            }
          }
        ]
      }
    ]
  }
};

and server.js:

const express = require('express');
const path = require('path');
const port = process.env.PORT || 8080;
const app = express();
app.use(express.static(__dirname));//
app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, 'index.html'));
});
app.listen(port);

and added an empty bundle.js file to the project root and the following tag to my existing index.html:

<script src="bundle.js"></script>

Now, after adding a package.json file with the script

"dev": "webpack-dev-server --mode development --open"`

and after runnning npm install and npm dev run, the project compiles (according to VS Code), but I get the following page on localhost:8080:

Cannot GET /

I have spent an entire workday trying to figure this all out. Why am I getting this error?

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

Creating a new HTML page in \dist, referring to the bundle.js file from the correct location and adding the following to module.exports in webpack.config.js:

devServer: {
  static: './dist'
},

worked in the end.

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda