How to update AEM Webpack Example to the latest version

At some point you've added the code of this AEM Webpack Example to your AEM project, and at a later point you realize that this project has more up-to-date code or different features than your now outdated version. How do you upgrade?

First of all, compare the version you're using with the one here to make sure that the versions are different and to get a grasp of how far your setup is behind. If the version difference is big, there's a higher chance that updating will take more time due to unpredicted issues. The version number can be seen in the package.json file.

It's one of our goals to make upgrades as easy and quick as possible. That's why we introduced two different folders a while ago: webpack.project and webpack.core. The idea is that you can make all necessary configurations in the webpack.project folder while you don't modify anything in the core folder. In reality, however, you often have to add NPM dependencies to your project, and those dependencies are defined in package.json which is part of the core folder.

Given you know above information, updates should be easy. Follow those steps:

1. Get the latest version of aem-webpack-example by downloading code from the master branch and replace the existing webpack.core folder in your project with the webpack.core folder from the downloaded code.

2. Add back any project-specific dependencies that you might have added to package.json. For example, add your custom linting configuration modules, Babel and a few other dependencies that are not part of the default aem-webpack-example setup:

$ npm install -D eslint-config-infield stylelint-config-infield
$ npm install babel-polyfill custom-event feature-js

3. Run npm install to ensure that all dependencies are installed and up-to-date.

For small version updates, you should be all set by now :)

Other things you might want to check and update:

• For bigger version changes, you might want to double-check the configuration defined in the webpack.project folder. If the core folder has some significant changes or new features, an adjustment of your project-specific configuration might be necessary or recommended.

• Once in a while, the dependencies defined in our Maven build script change. Take a look at the frontend-maven-plugin configuration which is defined in pom.xml and make sure that version numbers and other options still make sense.

• The main folder contains files that are neither part of webpack.core nor webpack.project, such as .browserslistrc. Make sure they're part of your setup and up-to-date.