AEM Webpack Example
Why Webpack in AEM?
However, your front end developers are probably not happy with it and waste precious time. Why? AEM's out-of-the-box tools can't keep up with the rapid advances in the front end world.
Webpack in AEM improves front end development because...
- It can be extended easily and supports the integration of ~600.000 npm modules.
- It can automatically prefix CSS for better cross-browser compatibility, ensure consistent code style, and automate most tasks you can think of.
Let's make AEM fun for everyone.
Integrate Webpack into AEM
Before you start, you might want to read the blog post "How does Webpack fit into AEM?" to get a general idea of some concepts that are implemented in AEM Webpack Example.
The structure of this project mirrors Adobe's Project Archetype. To get started, you can either set up a new project using the archetype, or you use your existing project. Then follow the step-by-step summary below. Each step links to a folder containing a README file with more instructions. Make sure you read those for detailed instructions of each aspect.
- Copy the example Webpack folder, .browserslistrc and .gitignore to
- Extend your project's pom.xml.
This is already enough to run the project's Maven build and Webpack. Try it now! Then you want to modify a few more things:
- Customize the webpack.project configuration.
- Use the generated files on your page, for example by including them in a clientlib.
- Add a webpack.resolve folder for reusable code.
- See what happens if CSS violates a Stylelint rule
- See what Autoprefixer does to your CSS
||This is where core tools of this framework are defined. Avoid touching this folder to make future upgrades easier. All you might want to change in this folder is the
||Here lives the configuration for a project, allowing you to override and extend defaults defined in
||Webpack takes this folder and resolves its content for easy imports into JS and SCSS files. See webpack.resolve.|
||Every entry file defined in
AEM Webpack Example supports the following tools out-of-the-box:
- Maven integration using frontend-maven-plugin.
- AEM Front to auto-push changes into AEM and reload the browser window.
- Stylelint. Linting for CSS/SCSS.
- Autoprefixer. Prefixes CSS/SCSS to improve cross-browser compatibility.
Who we are
Bounteous creates big-picture digital solutions that help leading companies deliver transformational brand experiences.
Founded in 2003 in Chicago, Bounteous creates big-picture digital solutions that help leading companies deliver transformational brand experiences. Our expertise includes Strategy, Experience Design, Technology, Analytics and Insight, and Marketing. Bounteous forms problem-solving partnerships with our clients to envision, design, and build their digital futures.
And we are the AEM and front end experts you've been looking for. Meet us.