javascript - 单击强制事件触发两次(Webpack 中可能存在问题)

Question

我是 Webpack 新手，对 JavaScript 也没有那么丰富的经验。我正在尝试为 JS 文本编辑器建立一个新项目。但是，我注意到在为 #btn 按钮设置第一个 addEventListener 后，该事件被触发两次。

我不认为这种行为与事件本身有关，因为我创建了三个 console.log 函数。一个在事件监听器外部，剩下两个在事件监听器内部。所有这三个函数都会在浏览器控制台中被控制台记录两次，这让我认为这可能与 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');
});

webpack 配置文件:

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 后)index.html 文件 - 我怀疑您正在导入 main.js捆绑在 <script>标签，还包括捆绑的 JS。

这是因为您使用 Webpack 捆绑 HTML(HtmlWebpackPlugin 插件)，并创建了一个 bundle ( main.js )，并将其导入到 HTML 中的某个位置。