title: Single click forces the event to fire twice (possible problem in Webpack)
body: <p>I am new to Webpack and not so experienced in JavaScript either. I'm trying to set up a new project for the JS text editor. However, I noticed that after setting up the first addEventListener for the #btn button, the event gets fired twice.</p>
  
  <p>I don't think that this behaviour is related to the event itself, since I have created three console.log functions. One is outside the eventListener, two remaining is inside. All of the three functions get console logged twice in the browsers console, which leads me to think that this might be related to Webpack config.</p>
  
  <p>If anyone has a clue or and advice, please help. </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;main class="main__content"&gt;
    &lt;article class="text__editor-wrapper"&gt;
      &lt;h1 class=" "&gt;Text Editor&lt;/h1&gt;
      &lt;div class="toolbar"&gt;
       &lt;button id="btn" class="toolbar__option"&gt;&lt;span class="fas fa-bold fa-2x"&gt;&lt;/span&gt;&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="text__editor" contenteditable="true"&gt;&lt;/div&gt;
    &lt;/article&gt;
  &lt;/main&gt;
  </code></pre>
  
  <p>index.js: </p>
  
  <pre><code>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');
  });
  </code></pre>
  
  <p>webpack config file:</p>
  
  <pre><code>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"
      })
    ]
  }
  </code></pre>