Mengatasi Error Cannot GET / di Webpack

Muhammad Fajar, 11-04-2024

Ended up using the HtmlWebpackPlugin and following the Webpack HTML documentation for setting it up. So now my file structure and webpack.dev.js file look like bellow. I moved my index.html into the src folder. HTMLWebpackplugin will automatically generate all <script> includes in the index.html file and will create an index.html file in the dist folder.

Folder Structure:

├── dist

│   └── // main.js and index.html will automatically be generated here

├── src

│   ├── app

│   │   └── app.js

│   └── index.html // index now in src folder

├── package-lock.json

├── package.json

└── webpack.config.js


webpack.dev.js:

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin'); // Add this

module.exports = {

  mode: 'development',

  entry: './src/app/app.js',

  output: {

    filename: 'main.js',

    path: path.resolve(__dirname + 'dist'),

  },

  plugins: [

    new HtmlWebpackPlugin({

      template: './src/index.html',

    }),

  ],

  devServer: {

    static: {

      directory: path.join(__dirname, 'dist'),

    },

    port: 5000,

    open: true,

  },

};