Webpack Flashcards

1
Q

What is Webpack

A

At its core, webpack is a static module bundler for modern JavaScript applications.

https://webpack.js.org/concepts/

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What does this configuration do and how does it work?:

module: {
rules: [
{
test: /.css$/,
use: [
‘style-loader’,
‘css-loader’,
],
},
],
},

A

Any file that ends with .css will be served to the style-loader and the css-loader.

It works because, under the hood, webpack uses a regular expression to determine which files it should look for and serve to a specific loader.

This enables you to import ‘./style.css’ into the file that depends on that styling. Now, when that module is run, a tag with the stringified css will be inserted into the <head> of your html file.

https://webpack.js.org/guides/asset-management/

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Concept: Loader

A

Loaders are transformations that are applied to the source code of a module. They allow you to pre-process files as you import or “load” them. Thus, loaders are kind of like “tasks” in other build tools and provide a powerful way to handle front-end build steps. Loaders can transform files from a different language (like TypeScript) to JavaScript or load inline images as data URLs. Loaders even allow you to do things like import CSS files directly from your JavaScript modules!

https://webpack.js.org/concepts/loaders/

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Modular Programming

A

In modular programming, developers break programs up into discrete chunks of functionality called a module.

https://webpack.js.org/concepts/modules/

Wikipedia:
“Modular programming is a software design technique that emphasizes separating the functionality of a program into independent, interchangeable modules, such that each contains everything necessary to execute only one aspect of the desired functionality.”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly