Один клик заставляет событие срабатывать дважды (возможная проблема в Webpack)

Question

Я новичок в Webpack и не так опытен в JavaScript. Я пытаюсь настроить новый проект для текстового редактора JS. Однако я заметил, что после настройки первого addEventListener для кнопки #btn событие запускается дважды.

Я не думаю, что это поведение связано с самим событием, поскольку я создал три консоли .log функции. Один находится за пределами EventListener, два оставшихся находятся внутри. Все три функции дважды регистрируются в консоли браузера в консоли браузера, что наводит меня на мысль, что это может быть связано с настройкой Webpack.

Если у кого-то есть подсказка или совет, пожалуйста, помогите.

HTML:

<main class="main__content">
  <article class="text__editor-wrapper">
    <h1 class=" ">Text Editor</h1>
    <div class="toolbar">
     <button id="btn" class="toolbar__option"><span class="fas fa-bold fa-2x"></span></button>
    </div>
    <div class="text__editor" contenteditable="true"></div>
  </article>
</main>

index. js:

import "./scss/style.scss";
import '@fortawesome/fontawesome-free/css/all.css';
import '@fortawesome/fontawesome-free/js/all.js';

const btn = document.querySelector("#btn");

function format(command, value) {
  document.execCommand(command, false, value);
}

console.log("Outside")
btn.addEventListener('click', function(e) {
  e.preventDefault();
  console.log("inside");
  console.log(e.target);
  format('bold');
});

Файл конфигурации веб-пакета:

const path = require("path"),
  HtmlWebpackPlugin = require("html-webpack-plugin"),
  BrowserSyncPlugin = require("browser-sync-webpack-plugin"),
  MiniCssExtractPlugin = require("mini-css-extract-plugin"),
  UglifyJsPlugin = require("uglifyjs-webpack-plugin");
module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
  },
  optimization: {
     minimizer: [new UglifyJsPlugin()]
  },
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    port: 900
  },
  module: {
    rules: [{
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"]
          }
        }
      },
      {
        test: /\.(svg|eot|woff|woff2|ttf)$/,
        use: [{
          loader: "file-loader"
        }]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [{
          loader: "url-loader"
        }]
      },
      {
        test: /\.(sass|scss|css)$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" },
          { loader: "sass-loader" }
        ]
      }
    ]
  },
plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ]
}

Answer 1

Вы не предоставили нам свой полный файл HTML, но я подозреваю, что именно в этом проблема.

Проверьте ваш окончательный (после Webpack) индекс. html файл - я подозреваю вас Вы импортируете пакет main.js в тег <script>, а также включаете в себя JS.

Это потому, что вы используете Webpack для связывания вашего HTML (плагин HtmlWebpackPlugin) а также создание пакета (main.js), который вы импортируете где-то в вашем HTML.