Este Gist muestra la configuración del archivo webpack config, donde indica todo lo necesario para que trabaje con lo producción y no con lo desarrollo, va contruyendo todo en dist(producciòn y lo muestra con el webpack-server)

webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  mode: 'development',
  entry: './main.js',
  // watch: true,
  output: {
    path: path.join(__dirname, 'dist'),
    // publicPath: '/dist/',
    filename: "bundle.js",
    chunkFilename: '[name].js'
  },
  plugins: [new HtmlWebpackPlugin({
    template: './index.html'
  })],
  module: {
    rules: [{
      test: /\.css$/i,
      use: ['style-loader', 'css-loader'],
      // test: /.jsx?$/,
      // include: [
      //   path.resolve(__dirname, 'app')
      // ],
      // exclude: [
      //   path.resolve(__dirname, 'node_modules')
      // ],
      // loader: 'babel-loader',
      // query: {
      //   presets: [
      //     ["@babel/env", {
      //       "targets": {
      //         "browsers": "last 2 chrome versions"
      //       }
      //     }]
      //   ]
      // }
    }]
  },
  // resolve: {
  //   extensions: ['.json', '.js', '.jsx']
  // },
  // devtool: 'source-map',
  devServer: {
    contentBase: path.join(__dirname, '/dist/'),
    inline: true,
    host: 'localhost',
    port: 8081,
  }
};

La estructura de los archivos es: