Split and organize JS files with Webpack, or Parceljs, or another tool?

Question

Node uses module.exports / require, and ES6 export / import.

I tried using Webpack but didn't manage to make my different JS files working together. It is easy to set the bundle.js to have the minified code, but I didn't managed to have as inputs several JS files, and to link them together.

Can someone explain (I didn't find clear informations about it) how to use Webpack or Parceljs or another tool, to split a project into several JS files, link them together so they can use functions from others, and compile them together at the end?

I have already tried to use Webpack but my files were not linked together.

Expected: Understand how to set a professional project by splitting the JS files by classes/objects.

Answer 1

I am not aware of any tools which will automatically split your monolithic code into modules. You will need to employ some method of creating modules (CommonJS, RequireJS, ES2015 modules, etc.) and then use Parcel/Browserify/Webpack from there.

Besides the best practice of not contaminating the namespace, modules, with the help of dynamic loading, can improve performance. Parcel et al will load only the bare minimum at startup.

This article provides a good overview of some of the bundling options and part 1 of the article discusses module options. It is a bit dated but there is quite a bit online around ES2015 modules and transpiling.