需要HTML中的Webpack捆绑包中的模块

Question

我正在从brunch迁移到Webpack（使用Laravel Mix），并且试图实现以前使用的相同工作流程，基本上是：

• 整个应用程序只有两个捆绑包： app.js 和 site.css
• 能够从HTML要求并加载已定义的模块

请考虑以下假设的文件夹结构：

public/
|-- dist/
|   |-- site.js
|   |-- site.css
|-- javascripts/
|   |-- application.ts
|   |-- components/
|   |   |-- dateTimePicker.ts
|   |-- dashboard/
|   |   |-- index.ts
|-- stylesheets/
|   |-- application.sass

对于配置，我使用了类似的东西：

mix.setPublicPath('public');
mix.ts('public/javascripts/application.ts', 'dist').sourceMaps();
mix.sass('public/stylesheets/application.scss', 'dist');

现在，对于每个页面，我希望能够做到：

<script>
  var module = require("dashboard/index");
  module.Init(); 
</script>

（这种方法类似于人们过去对Ruby on Rails和Sprockets和清单文件所做的工作。）

仅强调一下，目标是：

• 提供此单独的捆绑/缩小/压缩文件，以便用户永远只请求一次！
• 按需加载每个页面的模块。由于我使用的是具有渐进增强功能的MPA，因此我只需要在每页上运行一些javascript。这非常方便，因为在初始化之前，我可以将参数从模板引擎（Razor）传递到该模块。

PS。：我可能是错的，但是Brunch不会污染全局名称空间以公开模块。