1

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.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy