Webpack

Question 1

[webpack] config.module.rules.push() - wat doet dit?

Answer 1

This adds a new rule to the webpack module rules array

Question 2

[webpack] test: /.svg$/

Answer 2

This rule applies to files with the .svg extension

Question 3

[webpack] include: /node_modules\/assets/

Answer 3

include: /node_modules\/assets/ - This restricts the rule to only apply to the rule files within the node_modules/assets directory

Question 4

[webpack] use: { loader: ‘url-loader’ }

Answer 4

use: { loader: ‘url-loader’ } - It specifies that these SVG files should be processed using the ‘url-loader’

Question 5

[webpack] options: { name: ‘[name].[hash].[ext]’ }

Answer 5

Keep the original filename ([name])
Add a content hash for cache busting ([hash])
Keep the original extension ([ext])

Question 6

[webpack] wat doet ‘bundling’?

Answer 6

Bundling: It takes various JavaScript files (and their dependencies) and combines them into one or more optimized bundles for the browser.

Question 7

[webpack] wat doet Module resolution?

Answer 7

Module resolution: Webpack understands different module systems (CommonJS, ES modules) and resolves dependencies between them.

Question 8

[webpack] wat doet Loaders?

Answer 8

Loaders: It transforms non-JavaScript files (like CSS, images, SVG, TypeScript, etc.) into modules that can be included in your JavaScript bundle through specialized loaders (like the url-loader in your example).

Question 9

[webpack] wat doet Code splitting?

Answer 9

Code splitting: It can split your code into chunks that load on demand, improving initial load performance.

Question 10

[webpack] wat doet Asset optimization?

Answer 10

Asset optimization: It can minify, compress, and optimize your code and assets for production.

Question 11

[webpack] wat doet Development Tools?

Answer 11

Development tools: It provides features like hot module replacement for faster development.