Webpack Dev Server - Not displaying index.html-CodePudding

When I go to localhost:5000 my index.html file is not loaded. Is there a way for Webpack Dev Server to get my root index.html? Whats the best way to go about this.

Folder Structure:

├── dist
│   └── main.js
├── src
│   └── app
│       └── app.js
├── index.html
├── package-lock.json
├── package.json
└── webpack.config.js

webpack.dev.js:

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/app/app.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname   'dist'),
  },
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    port: 5000,
    open: true,
  },
};

CodePudding user response：

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,
  },
};