Question

我有一个webpack脚本

const webpack = require('webpack');
const path = require('path');

module.exports = (env, options) => ({
  entry: "./clickscape.js",
  output: {
    path: path.resolve(__dirname, '../priv/static/js'),
    filename: 'clickscape-bundle.js'
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
})

生成捆绑包。在我的clickscape.js内，我希望能够在加载了捆绑软件的HTML页面中访问这些函数，即：

<script src="http://localhost:4000/js/clickscape-bundle.js"></script>
<script>do_something_clickscape_dot_js()</script>

似乎因为webpack混淆了其编译的所有代码，所以在外部调用什么并不明显。

我需要做什么才能使电话正常工作？

Answer 1

除非这样的变量是全局变量，否则不能。通常这是一件好事，因为它可以防止您自己的变量与其他（外部）脚本的变量之间发生名称冲突。

在我的clickscape.js中，有一些我希望能够使用的功能访问加载了捆绑软件的HTML页面（...）

如果您一定要在HTML页面中访问它们，则可以将它们设置为./clickscape.js中的全局变量：

window.do_something_clickscape_dot_js = function() {
    // your code
}

现在do_something_clickscape_dot_js()在您的HTML页面中可用。但是为什么不直接在./clickscape.js中调用它呢？

const do_something_clickscape_dot_js = () => {
    // do something here
}

/*
 * calling the function in this file has same effect as calling it
 * in script tag in the HTML page
 */
do_something_clickscape_dot_js();

我想不出一个用例，在该用例中，您一定要在HTML页面中调用它，但是如果您想：寻求一个全局选择。

Webpack-如何使已编译的函数在HTML文档中可用？

1 个答案: