Webpack：ReferenceError：<a function> 未定义答案

【问题标题】：Webpack: ReferenceError: <a function> is not definedWebpack：ReferenceError：<a function> 未定义
【发布时间】：2021-02-05 02:02:11
【问题描述】：

我正在一个项目中工作，该项目决定为每个视图捆绑一些 .js。

视图被定义为 pug 模板。

webpack 打包正常，构建时没有错误。

这里是 webpack.config.js：

const path = require('path');

module.exports = {
  target: 'web',
  mode: 'development',
  entry: {
    showusers: [
    './public/javascripts/showusers_actions.js',
    ],
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'bin'),
  },
};

但我在浏览器上收到了这个 Uncaught ReferenceError: checkPass is not defined 错误。

这里是show_users_action.js代码的sn-p：

const checkPass = function(input) {
  if (input.value != document.getElementById('new_pass').value) {
    input.setCustomValidity('As senhas estão diferentes');
  } else {
    input.setCustomValidity('');
  }
};

上面的这个函数在下面的条件下被调用：

input.form-control(type="password",
                   id="new_pass_ack",
                   name="passwordack"
                   oninput="checkPass(this)",
                   required)

在浏览器调试器中，showusers.bundle.js 具有如下功能：

[...] var checkPass = function checkPass(input) [...]

在引入 webpack 之前一切正常。

【问题讨论】：

我做了一个解决方法是“[...] window.checkPass = function(input) [...]”而不是“[...] const checkPass = function(input) [ ...]”，但我对这种修修补补并不满意。

标签： javascript webpack webpack-5

【解决方案1】：

默认情况下，webpack 不会默认向 window 公开函数，以防止与现有全局变量发生冲突。

尽管是一种解决方法，但解决方案是

 window.checkPass = function(input) {[...]}

【讨论】：