且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

从外部调用 webpacked 代码(HTML 脚本标签)

更新时间:2023-12-05 20:18:58

看来你想将 webpack bundle 作为 图书馆.您可以将 webpack 配置为在您自己的变量中的全局上下文中公开您的库,例如 EntryPoint.

It seems that you want to expose the webpack bundle as a library. You can configure webpack to expose your library in the global context within a variable of your own, like EntryPoint.

我不知道 TypeScript,所以这个例子使用了普通的 JavaScript.但这里重要的部分是 webpack 配置文件,特别是 output 部分:

I don't know TypeScript so the example uses plain JavaScript instead. But the important piece here is the webpack configuration file, and specifically the output section:

module.exports = {
  entry: './index.js',
  output: {
    path: './lib',
    filename: 'yourlib.js',
    libraryTarget: 'var',
    library: 'EntryPoint'
  }
};

index.js

module.exports = {
  run: function () {
    console.log('run from library');
  }
};

然后您将能够像您期望的那样访问您的库方法:

Then you will be able to access your library methods like you expect:

<script src="lib/yourlib.js"></script>
<script>
  window.onload = function () {
    EntryPoint.run();
  };
</script>

使用实际代码检查gist.