To make sure Webpack 5 supports these modules, they must be written in a programming language that can be understood and processed. Webpack 5 does this by using something called loaders.

Loaders make Webpack truly stand out over rival bundlers. In simple terms, a loader tells Webpack how to process code that is not JavaScript or other predefined code that Webpack automatically understands, such as JSON or HTML. Webpack 5 will then include this processed code as dependencies in your bundle.

Webpack 5 has a community of developers, referred to as the Webpack community, who have built these loaders. These loaders currently support a large number of languages and processors; some examples are as follows:

• TypeScript
• SASS
• LESS
• C++ 
• Babel
• Bootstrap

For a full list of available loaders, see the Further reading section toward the end of this chapter.

There are many more loaders available from the Webpack community. The use of loaders means Webpack 5 can be described as a dynamic platform that allows the customization of just about any technology stack. In this chapter, we will begin to use loaders proactively as part of some example use cases that you can practice coding yourself.

During your development, you may come across the term encapsulation, especially when working with modules and loaders. 

To understand encapsulation, you first need to understand that software can sometimes be developed independently until a requirement for interplay presents itself. For software to work together within a project, a dependency must be created between the two technology stacks. This is what is meant by the term encapsulation.

Encapsulation is a simple topic to outline; however, the next area of modular coding concerns resolution. It is a wider subject and has, therefore, been detailed as part of its own subsection.