使用 Webpack 和 JS 模块，但仍然可以从 HTML 文件访问全局变量

Question

我是 Webpack 的新手，我想我遗漏了一些东西。

我有一个简单的 Javascript 文件 (items.js)，它需要一些外部模块（一些来自 npm，一些是我自己编写的）。注意：该应用程序是一个多页面应用程序，因此 Webpack 配置为从多个入口点构建，它将构建 1 "common" 包和 1 "entry point" 包（所以我使用 CommonsChunkPlugin)

var $ =         require("jquery");

var vm = {
    loadData: function() {
        $('#items').text('Data loaded');
    },
    add: function() {
        $('#modal').show();
    }
};

$(document).ready(function() {
    vm.loadData();
});

现在，在 HTML 文件中，即

<div id="items">Loading...</div>

<button onclick="vm.add()">Add</button>

<form id="modal" style="display: none">
    <input type="text" name="name">
</form>

<script type="text/javascript" src="/js/common.js"></script>
<script type="text/javascript" src="/js/items.js"></script>

我看到 Webpack 让我失去了对 "vm" var 的可见性，它不是全局的。但我想从 HTML 文件访问 "vm" var，例如当用户单击 "Add" 按钮时调用 vm.add()。

有什么想法吗？谢谢

Answer 1

在您的 webpack.config 文件中，您可以公开您的顶级变量

module.exports = {
  output: {
    //you can expose the variable to window
    libraryTarget: 'window',
    library: 'vm'
  }
};

这是一个很好的例子，可能会对你有所帮助 expose bundle in a variable in the global context

output.library documentation

使用 Webpack 和 JS 模块，但仍然可以从 HTML 文件访问全局变量

Using Webpack and JS modules, but still getting access to global vars from HTML file

javascript

webpack

node-modules