在单独的文件中使用javascript变量

Question

我已将应用程序javascript的核心分成一个functions.js文件，该文件存储我在所需页面上使用的函数：

// Functions.js
var MYAPP = {};

(function($) {

    /**
     * Load the Javascript for individual pages in the application.
     */
    MYAPP.loadPages = {
        init: function($page) {
            this[$page]();
        },

        home: function() {
            console.log('On the homepage');
        }
    };

})(jQuery);

我通过webpack运行该文件 - 因为我可能会在以后添加其他插件 - 通过执行webpack resources/assets/js/functions.js public/js/functions.js。

现在当我在我的主页上时，我把它放在身体标签的底部：

// Homepage.html
<script src="js/functions.js"></script>
<script>
    $(document).ready(function() {
        MYAPP.loadPages.init('home')
    });
</script>

并收到错误Uncaught ReferenceError: MYAPP is not defined。

注意：如果我不通过webpack运行它似乎工作正常......