Brunch: separating vendor and app javascript

Question

I have made two bundles of javascript from our project- vendor and app. I do this in the manner suggested by the documentation, as seen in this snippet from my brunch-config

Answer 1

The problem is caused by the mixture of joinTo and entryPoints. I assume that with your config, you first split your code in app.js and vendor.js but then the app.js gets overridden by the output of the entryPoints.

In order to solve it, you have to choose one of the options:

Option 1

Remove the entryPoints declaration. This will just split your code along the provided RegEx.

Option 2

Remove the joinTo declaration and change the entryPoints to:

    entryPoints: {
      'source/scripts/app.jsx': {
        'js/vendor.js': /^(?!source\/)/,
        'js/app.js': /^source\//
      },
    }

Conclusion

In this very case, the output of both options is the same. But with entryPoints the code get's analyzed and only needed modules get bundled. Because there aren't any unnecessary modules, the size is the same. See this issue for more information.