Webpack: ReferenceError: <a function> is not defined

Question

我在一个项目中工作，该项目决定为每个视图捆绑一些 .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'),
  },
};

但是我在浏览器上遇到了未捕获的 ReferenceError: checkPass is not defined 错误。

这里是 show_users_action.js 的代码片段：

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 之前一切正常。

Answer 1

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

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

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

Webpack: ReferenceError: <a function> is not defined

Webpack: ReferenceError: <a function> is not defined

javascript

webpack

webpack-5