Where do I put JS files so they are added to the /dist/ folder?

[nickbencino]

I feel like this is not the right place to ask but in the readme you say "Feel free to ask if you feel stuck." and I see nowhere else to ask.

I don't understand how to add custom JS files so they get auto imported into the /dist/ folder.

Furthermore, I have some custom JS files that I want to include conditionally depending on the page. Where would I put these files so that they will be added to the /dist/ folder?

From reading the readme it sounds like any file added to src/assets/js will but auto put into the app.js but that does not seem to work. Also, that would not allow me to conditionally load files.

[colin-marshall]

@forex4noobs check out this comment:
#1073 (comment)

The README needs an update.

[kavasey]

Hi @colin-marshall I believe @forex4noobs is in part probably talking about code splitting (conditionally loading js based on a page) which is a feature in webpack 2 as pointed out by this article https://dev.to/kayis/dynamic-imports-with-webpack-2

I would very much be happy if someone experienced in webpack can point us in the right direction as to how to use this feature in FP?
Loading all js files into one bundle makes the app.js size big and is a concern for UX reasons.

[nickbencino]

@colin-marshall Thanks, that helps a lot.

@kavasey I do want to load conditionally and it would be great to do it with webpack. However, using the above method created a new file in dist/assets/js/ which I can then load conditionally via library/enqueue-scripts.php

[colin-marshall]

@kavasey we use webpack because that's what Foundation switched to in 6.4, and Foundation bundles everything into app.js. Because of the way Foundation works we have to model our build system after theirs to make sure everything works properly. There are pros and cons to having a single app.js file, and with Foundation you can disable any components you don't use in order to reduce file size.

I would recommend using the method @forex4noobs describes to conditionally load js based on the page. I have not done any code splitting with webpack yet so I can't help you there, but I would suggest searching for webpack code splitting tutorials that are specific to WordPress. Sorry I can't help you further.

[kavasey]

@colin-marshall Thank you for the feedback. I see what you mean. I'll try your suggestions and see how it goes. Thanks

[dgobnto]

Should one modify the PATHS.entries in config.yml to src/assets/js/** and !src/assets/js/lib/**/* to better deal with the current recommended method for adding new JS files to the dist folder?
It seems that this way you should only need to add your custom.js file to the src/assets/js directory and it would be added to the dist folder by default.