webpack打包后，HTML无法识别我的JS函数

Question

我在我的HTML抽屉中有一个函数，在页面加载时它会自动点击第一个选项卡。当我使用webpack来打包JS时，HTML会给我一个Uncaught ReferenceError: openTab is not defined的错误，这使得我的openTab函数无法在页面加载时工作。正常的controller.js没有任何问题。

webpack.config.js

const path = require('path');

module.exports = {
    entry: {
        app: './src/js/controller.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist/build'),
        filename: 'controller.bundle.js'
    },
    module : {
        rules: [{
          // A regex that looks at all Javascript files
          test: /\.js?$/,
          exclude : /node_modules/,
          loader: 'babel-loader',
          //this is where we define our presets
          query: {
            presets:['@babel/preset-env']
          }
        }]
      }
}

package.json

"main": "controller.js",
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "start": "webpack-dev-server --mode development --open"
  },
  "devDependencies": {
    "@babel/core": "^7.9.6",
    "@babel/preset-env": "^7.9.6",
    "babel-loader": "^8.1.0",
    "html-webpack-plugin": "^4.3.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "axios": "^0.19.2",
    "core-js": "^3.6.5",
    "express": "^4.17.1",
    "regenerator-runtime": "^0.13.5"
  }
}

home.html //最后一个

标签之后的内容是每个选项卡的内容。当函数没有运行时，所有内容都可见。

<div class="drawer__content">
            <div class="tab">
                <button class="tablinks " onclick="openTab(event, 'Home')" id="defaultOpen"><i class="fas fa-home"></i></button>
                <button class="tablinks" onclick="openTab(event, 'Fav')"><i class="fas fa-star"></i></button>
                <button class="tablinks" onclick="openTab(event, 'Settings')"><i class="fas fa-cogs"></i></button>
              </div>

controller.js

function openTab(evt, tabName) {
  // Declare all variables
  var i, tabcontent, tablinks;

  // Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

      // Get all elements with class="tablinks" and remove the class "active"
      tablinks = document.getElementsByClassName("tablinks");
      for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
      }

  // Show the current tab, and add an "active" class to the link that opened the tab
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
}

document.getElementById("defaultOpen").click()

- SkepticalTiger

Answer 1

使用addEventListener可能会有所帮助，而不是直接在HTML按钮中使用onclick="openTab(event, 'Home')"。 例如，对于具有id="defaultOpen"的按钮，请尝试使用以下代码：

const button1 = document.getElementById("defaultOpen");
button1.addEventListener("click", function () {
  openTab(event, 'Home')
}); 

- Nataly Chkhan

Answer 2

我在网上找到了一篇旧帖子，里面提到了与我的问题相同的情况。我认为这可能与将函数设置为全局有关。

我需要做的是更改我的 HTML 中带有 onclick 的函数：

function openTab()

到

openTab = function()

然后一切都解决了。

- SkepticalTiger