Webpack Flashcards
What is Webpack
At its core, webpack is a static module bundler for modern JavaScript applications.
https://webpack.js.org/concepts/
What does this configuration do and how does it work?:
module: {
rules: [
{
test: /.css$/,
use: [
‘style-loader’,
‘css-loader’,
],
},
],
},
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/
Concept: Loader
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/
Modular Programming
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.”
