This section will cover the terminology used in Webpack 5. This will include native terms, as well as some more unusual acronyms:

• Assets: This is a term frequently used in Webpack to prevent conflations of concepts. It refers to image files, or even data or script files, collated by the software when producing a bundled application.
• Bundle: This refers to the application that is output once Webpack has compiled an application. This is an optimized version of the original or source application—the reasons for this will be discussed in detail in later chapters. The bundler will combine these files into one file, which makes unpicking and hacking very difficult. It also improves browser performance. It does this by ensuring that processors are kept to an optimal level and removing any coding structure that does not conform to a standard. This also encourages the developer to adopt conventions a lot more diligently. Should there be any insecure programming, these locations are more easily identified, isolated, and corrected.
• SASS: A version of CSS that has enhanced features. Webpack handles this code as it does CSS; however, it is a phrase that may come up and leave you stumped, so it is worth knowing about.
• SCSS: This is simply the name for the syntax version used to give SASS extra functionality. It is useful to know that Webpack is capable of transpiling both syntaxes.
• Transpiling: This is the process where Webpack 5 takes a set of input source code and changes it into a more optimized output distribution code. This is done by removing unused or duplicated code. Transpiling is used to convert one set of files into a simpler set. For instance, SCSS often contains script that can be easily stored inside a CSS file. You might also transpile SCSS to CSS, or TypeScript to JavaScript.
• TypeScript: For the uninitiated, TypeScript is a type of code that is similar to JavaScript in many ways. Browsers, for instance, most commonly run JavaScript, so it may be more appropriate to use JavaScript, where possible. Webpack 5 will transpile TypeScript into JavaScript whenever the former allows.
• CDN: A CDN is a network of proxy servers that provides high availability and high performance. Some examples are Google APIs, such as Google Fonts, and other similar tools that all JavaScript developers are, no doubt, familiar with.
• Dependency graphs: In Webpack 5, a dependency graph is a directed graph representing the dependency of several assets to each other. Webpack 5 maps a list of assets and dependencies itself and records how they depend on each other in an application. It uses this to derive an appropriate output file structure.

Though JavaScript is the entry point, Webpack appreciates that your other asset types—such as HTML, CSS, and SVG—each have dependencies of their own, which should be considered as part of the build process.

Webpack is comprised of input and output. The output can be made of one or more files. As well as bundling modules, Webpack can carry out a lot of functions on your files. The input refers to the original files when they are in their original structure, before bundling. The output refers to the resulting bundled files in their new and optimized filing structure. Inputs, therefore, are comprised of the source files and outputs can be comprised of development files or production files.

There is often a conflation between the terms input and output and source code and development code.

When working with Webpack 5, these phrases may present themselves and it is important that you don't get too confused by them.

That summarizes the bulk of the terminology you will come across when using Webpack. Now, we will explore how the software works.