I'm migrating away from brunch to Webpack (using Laravel Mix) and I'm trying to achieve the same workflow I was using before, which is basically:
- Having just two bundles for the whole application: app.js and site.css
- Being able to require and load defined modules from HTML
Consider the following hypothetical folder structure:
public/
|-- dist/
| |-- site.js
| |-- site.css
|-- javascripts/
| |-- application.ts
| |-- components/
| | |-- dateTimePicker.ts
| |-- dashboard/
| | |-- index.ts
|-- stylesheets/
| |-- application.sass
For configuration, I'm using something along the lines of:
mix.setPublicPath('public');
mix.ts('public/javascripts/application.ts', 'dist').sourceMaps();
mix.sass('public/stylesheets/application.scss', 'dist');
And now, for each page I want to be able to just:
<script>
var module = require("dashboard/index");
module.Init();
</script>
(This approach is something similar to what people used to do with Ruby on Rails and Sprockets and manifest files).
Just to highlight, the goals are:
- Provide this single bundled/minified/compressed file so users will request it only once, ever!
- Load modules on demand for each page. Since I'm using an MPA with progressive enhancement, I just need to simply run some javascript per page. This is very convenient because I can pass parameters from my template engine (Razor) to that module before initializing it.
PS.: I may be wrong, but Brunch would not pollute the global namespace to expose modules.