Why does some site functionality break during production mode?

T

tfosk2021-04-24 18:19:03

JavaScript

tfosk, 2021-04-24 18:19:03

Hello everyone, I'm making a blog, everything works fine in development mode, all styles and scripts work as they should. But as soon as I do production and deploy the project to the site, the input style falls off and errors appear in the script. Can anyone come across why this can be at all?
webpack.config.js code

const HTMLPlugin = require('html-webpack-plugin');

module.exports = {
    entry: ['@babel/polyfill', './src/app.js'],
    output: {
        path: __dirname + '/dist',
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: __dirname + '/dist'
    },
    plugins: [
        new HTMLPlugin({
            filename: 'index.html',
            template: './src/index.html',
            favicon: './src/favicon.ico'
        })
    ],
    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            ['@babel/preset-env', {targets: "last 5 versions"}]
                        ]
                    }
                }
            }
        ]
    }
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/mustard-ui.min.css">
  <link rel="stylesheet" href="styles.css">
  <title>Blog</title>
</head>
<body class="hide">
<header id="header">
  <h1 class="title">Created - <a href="https://github.com/Ksooft" target="_blank" rel="nofollow noopener" onclick="this.blur()">Ksooft</a></h1>
  <h2 class="subtitle">Создавайте статьи и добавляйте их в избранное</h2>
  <button class="get-started button button-purple button-large js-header-start">Приступить</button>
</header>

<section class="container w-container">
  <ul class="tabs" id="navigation">
    <li><a class="tab" href="#" data-name="posts">Посты</a></li>
    <li><a class="tab active" href="#" data-name="create">Создать</a></li>
    <li><a class="tab" href="#" data-name="favorite">Избранное</a></li>
  </ul>
  <a class="github" href="https://github.com/Ksooft" target="_blank" rel="nofollow noopener" onclick="this.blur()"><i class="fab fa-github"></i></a>
  <div class="loader-wrap hide" id="loader">
    <div class="lds-ripple"><div></div><div></div></div>
  </div>

  <form id="create">
    <h1 class="h4">Создать новый пост</h1>

    <div class="form-control">
      <label>Название</label>
      <input type="text" name="title" placeholder="Введите название">
    </div>

    <div class="form-control">
      <label>Текст</label>
      <textarea name="fulltext" placeholder="Введите текст поста"></textarea>
      <p class="length-textarea">0</p>
    </div>

    <div class="form-control">
      <label>Тип</label>
      <select name="type">
        <option value="note" selected>Заметка</option>
        <option value="news">Новость</option>
      </select>
    </div>

    <button class="button-primary button-round button-shadow" type="submit">Создать</button>
  </form>
  <div id="posts" class="hide"></div>
  <div id="favorite" class="hide"></div>

</section>

</body>
</html>