После сборки webpack'om файл index.html открывается в браузере пустой

Question

Такое ощущение, как будто не подцепляется файл со скриптом, хотя он прописан. При запуске webpack dev server всё работает. Мб для окончательной сборки нужно тоже, чтобы был какой-то сервер?

webpack.config.js:

const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js'
    },
    mode: 'development',
    devServer: {
        contentBase: path.join(__dirname, '/dist'),
        compress: true,
        port: 9000,
        watchContentBase: true,
        progress: true
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [{
                            plugins: ['@babel/plugin-proposal-class-properties']
                        }]
                    }
                }
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true
                        }
                    }
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: ['file-loader']
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: 'html-loader'
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: './src/index.html',
            filename: './index.html'
        })
    ]
}

index.html:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>testTask, bro</title>
</head>
<body>
    <div id="root">

    </div>
<script src="main.js"></script></body>
</html>

main.js и index.html лежат в одной папке.

Answer 1

Да, так и есть. Вам необходимо установить http-server (npm). Установить его можно глобально, хотя и локально тоже подойдет.

При локальной установке запустите команду $ npm run http-server в папке с index.html При глобальной, просто $ http-server

По идее, после запуска, он должен будет написать что-то вроде этого:

Starting up http-server, serving ./ through http
Available on:
  https:127.0.0.1:8080
  https:192.168.1.101:8080
  https:192.168.1.104:8080
Hit CTRL-C to stop the server

Переходите по localhost:8080 и будет вам счастье. :)

Answer 2

На зарубежном stackoverflow нашёл ответ. Если используется react-router-dom, то нужно импортировать не BrowserRouter, а HashRouter. Вот тут подробно описано.

БЛОГ НА HUSL

После сборки webpack'om файл index.html открывается в браузере пустой

Ответы (2 шт):