Webpack4 捆绑 function 未定义

Question

I made a bundle using webpack4.我使用 webpack4 制作了一个包。 Making bundle file is perfect, but my simple website is not working.制作捆绑文件是完美的，但我的简单网站无法正常工作。

I want to execute getApple() function after load html page.我想在加载 html 页面后执行 getApple() function。 But what I get is error message function is not defined.但我得到的是错误消息 function 未定义。

Below is my source code.下面是我的源代码。

// index.js

function getApple () {
    console.log('getApple');
}

// ./dist/main.js
! function(t) {
    var a = {};

    function o(e) {
        if (a[e]) return a[e].exports;
        var n = a[e] = {
            i: e,
            l: !1,
            exports: {}
        };
        return t[e].call(n.exports, n, n.exports, o), n.l = !0, n.exports
    }
    o.m = t, o.c = a, o.d = function(e, n, t) {
        o.o(e, n) || Object.defineProperty(e, n, {
            enumerable: !0,
            get: t
        })
    }, o.r = function(e) {
        "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {
            value: "Module"
        }), Object.defineProperty(e, "__esModule", {
            value: !0
        })
    }, o.t = function(n, e) {
        if (1 & e && (n = o(n)), 8 & e) return n;
        if (4 & e && "object" == typeof n && n && n.__esModule) return n;
        var t = Object.create(null);
        if (o.r(t), Object.defineProperty(t, "default", {
                enumerable: !0,
                value: n
            }), 2 & e && "string" != typeof n)
            for (var a in n) o.d(t, a, function(e) {
                return n[e]
            }.bind(null, a));
        return t
    }, o.n = function(e) {
        var n = e && e.__esModule ? function() {
            return e.default
        } : function() {
            return e
        };
        return o.d(n, "a", n), n
    }, o.o = function(e, n) {
        return Object.prototype.hasOwnProperty.call(e, n)
    }, o.p = "", o(o.s = 0)
}({
    "./index.js": function(module, __webpack_exports__, __webpack_require__) {
            "use strict";
            eval('__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _babel_polyfill__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/polyfill */ "./node_modules/@babel/polyfill/lib/index.js");\n/* harmony import */ var _babel_polyfill__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_polyfill__WEBPACK_IMPORTED_MODULE_0__);\n\n\nfunction getApple () {console.log('getApple');}
...

// index.php
<head>
    <script type="text/javascript" src="./dist/main.js<?php echo '?version=' . $_versionCode ?>"></script>
</head>
<body>
    <script>getApple(); // not working: Uncaught ReferenceError: getApple is not defined</script>
</body>

Would somebody help me please....有人可以帮我吗....

Answer 1

It seems your function is in a module itself which means you can't get it via window object unless you publish it.您的 function 似乎在模块本身中，这意味着您无法通过 window object 获得它，除非您发布它。 So in order to invoke this, you might have to call your function inside the module or wait until your site loaded:因此，为了调用它，您可能必须在模块内调用 function 或等到您的站点加载：

function getApple () {
  console.log('getApple');
}

getApple()

// OR

window.onload = () => getApple()

Or if you want to register your function with window then invoke later as you did:或者，如果您想使用 window 注册您的 function，然后像您一样稍后调用：

function getApple () {
  console.log('getApple');
}

window.getApple = getApple;

Webpack4 捆绑 function 未定义

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-07-14 08:19:06

Webpack4 捆绑 function 未定义

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-07-14 08:19:06

解决方案1
1 已采纳 2020-07-14 08:19:06