Adding generic, reusable JavaScript & SCSS

Because most of the content in AEM is organized in components, it's beneficial to place component-specific JavaScript and SCSS files in the folder of a component. That's why we have one webpack.module folder per component that contains said files.

However, there are cases where it makes sense to share code across components. Typical examples are variables, JavaScript utility functions and SCSS mixins. Where should generic code like this be placed within AEM? To solve this, we created an extra folder named webpack.resolve. Webpack automatically resolves the content of that folder so we can easily import it into any component-specific files as follows:

import {
  helloWorld,
} from 'js/utils';

console.log(helloWorld());

You can find an example of such a folder here: .../jcr_root/apps/__appsFolderName__/components/webpack.resolve

Note that the default setup only supports one webpack.resolve folder and it must added in the directory as shown in the above example. (Unless you override our default Webpack configuration.)