DEV Community: Luca

Learn Webpack

Luca — Tue, 27 Sep 2022 17:39:44 +0000

A collection of notes and examples I've taken while learning how to use Webpack:

Mode: Enable webpack built-in optimizations for development and production.
Multiple Configurations: Use --env flag to create different config based on the environment.
Bundle: Merge multiple javascripts files.
Separate Runtime: Extract webpack runtime logic in a separate file.
Tree Shaking: Remove unused javascript codes from the app.
Chunks Types: Explain what a webpack chunk is.
Dynamic Import: Use import() to load part of an app on demand.
Code Splitting: Divide an app into smaller files.
Loaders and Plugins: Explain what webpack loaders and plugins are.
Asset Modules: Import additional type of assets without configuring loaders.
Babel: Use babel-loader to transpile ES2015 code into into a backwards compatible version of javascript.
Babel Polyfill: Apply pollyfills to provide a backwards compatible version of a javascript feature.
Html Plugin Template: Generate html files with html-webpack-plugin.
Load CSS: Use css-loader and style-loader to parse stylesheets and place them into html page.
Source Maps: Emit javascript and css source maps.
Public Path: Specify a base path for all the assets within your applicaion.
Separate CSS: Use mini-css-extract-plugin to extract stylesheets into a separate file.
Remove Unused CSS: Use purgecss to remove unused part of stylesheets.
Load Images: Use asset/resource to parse and emit images and asset/source to parse raw svg files.
SASS: Load sass files with sass-loader.
PostCSS: Enable postcss with postcss-loader.
Minify: Enable code minification by using mode.production, css-minimizer-webpack-plugin and HtmlWebpackPlugin.minify.
Caching: Setup client level caching by adding hash to filenames.
Context Module: Run require.context() at compile time to import assets.
Debug Webpack: Debug webpack configuration using nodejs --inspect tool.
Lazy Load Image: Dynamically import an image with import().
Lazy Load Multiple Images: Use require.context() to include all images from a folder and dynamically load them with import().
Lazy Load Multiple Images Folders: Dynamically import images inside multiple folders when a button is clicked.
Composing Configurations: Organize webpack configs in separate files and merge them with webpack-merge.
Static Site Generator: Create a simple SSG on top of HtmlWebpackPlugin.

Customize shell prompt

Luca — Fri, 24 May 2019 17:37:15 +0000

Change the appearance of the terminal shell prompt: customize colors, text formatting, and dynamically display other type of information (including git status).

We're going to use bash on Ubuntu but most concepts can also be applied in other unix-based systems (e.g. MacOS and Windows Subsystem for Linux).

Prompts variables

Bash has four type of prompts controlled by those variables:

PS1 primary prompt.
PS2 displayed when you've to type more commands (multi-line commands).
PS3 displayed when the select command is waiting for input.
PS4 displayed when debugging Bash scripts.

If you echo $PS1 you'll see a bunch of characters sequences:

\[\e]0;\u@\h: \w\a\]${debian_chroot:+($debian_chroot)}\[\033[01;32m\]\u@\h\[\033[00m\]:\[\033[01;34m\]\w\[\033[00m\]\$

When you enter an interactive shell session, the shell read PS1 and output something like this:

username@hostname:directory$

The dollar $ symbol at the end signifies that you're a normal user, for root user it's replaced with the hash # symbol.

If you echo $PS2 it'll display only the greater-than sign > symbol.

You can see both PS1 and PS2 in the screenshot below:

The PS3 and PS4 prompts are not very common. In this guide we'll focus on the primary prompt.

Change the prompt

To control the output of your primary prompt, edit the PS1 variable:

PS1='my_prompt: '

Because PS1 was replaced directly in Bash, changes will disappear on shell exit. Later in this guide we'll learn how to make this changes permanent.

Embedding commands

You can run commands inside PS1 variable:

PS1='$(exit_status=$? ; if test $exit_status -ne 0 ; then echo "(err)" ; fi)my_prompt: '

If exit code is not equal to 0 it'll display (err).

Backslash-escaped characters

There are some backslash-escaped special characters you can use to dynamically display useful information in the prompt.

For example:

PS1='\t \u \h \w \$ '

\t display time.
\u display user name.
\h display hostname.
\w display current working directory.
\$ display dollar $ symbol if you're normal user; display hash # symbol if you're root user.

Here is a complete list of backslash-escaped characters.

ANSI escape sequences

Bash allows the user to call a series of ANSI escape sequences to change colors, text formatting, cursor location and other options of the terminal window. Those sequences are a set of non-printable control characters which the shell interprets as commands.

An ANSI escape sequence always start with an escape character and a left-bracket character, followed by one or more control characters:

ESC[COMMAND

The escape character ESC can be written as \033 or \e or \x1b.
COMMAND is the control character.

See the list of ANSI sequences for all available commands (some terminals may have partial support for ANSI sequences).

Colors and text formatting

To colorize the output of your text terminal use the following ANSI sequence:

ESC[CODEm

Where CODE is a series of one or more semicolon-separated color codes.

For example:

echo -e "\033[44mHello World\033[0m"

-e enable echo to parse escape sequences.
\033[ mark the start of an ANSI sequence.
44 is the code for background color blue.
m mark the end of color codes.
0 removes all text attributes (formatting and colors). It's important to reset attributes, otherwise the styles will be applied to all texts after Hello World (including the prompt and the text we type).

You can also modify a color by setting an "attribute" before its base value, separated by a ; semi-colon.

So if you want a green background (46) with underline text (4), the sequence is:

echo -e "\033[4;46mHello World\033[0m"

You can combine multiple sequences together:

echo -e "\033[41m\033[4m\033[1;33mHello World\033[0m"

Here you can find a list of all color codes.

Save prompt changes permanently

To make the changes permanent you can modify the default PS1 variable or add a new one at the end of ~/.bashrc file:

PS1='$(exit_status=$? ; if test $exit_status -ne 0 ; then echo -e "(\[\033[31m\]err\[\033[0m\])${debian_chroot:+($debian_chroot)}" ; else echo ${debian_chroot:+($debian_chroot)} ; fi)\[\033[1;33m\]\u@\h\[\033[0m\]:\[\033[1;36m\]\w\[\033[0m\]\$ '

Non-printing characters must be surrounded with escaped square brackets \[ (start of non-printing characters) and \] (end of non-printing characters). For example \[\033[1;33m\]. Otherwise Bash think they're printing characters and use them to calculate its size (cause the text to wraps badly before it gets to the edge of the terminal).

This line ${debian_chroot:+($debian_chroot)} display to your prompt an indication of which chroot you're in.

You can use source ~/.bashrc to refresh the changes instead of exit and re-enter the shell.

Display git repository status

Git provide a script that allows to see repository status in your prompt.

Download git-prompt.sh:

curl -o ~/.git-prompt.sh https://raw.githubusercontent.com/git/git/master/contrib/completion/git-prompt.sh

The script comes with a function __git_ps1 that can be used in two ways:

You can call it inside PS1 (this way you can't see colored hints).
Or you can call it inside PROMPT_COMMAND (with this method you can enable colored hints).

By default __git_ps1 will show only the branch you're in, you can also enable git status through a series of variables whose names start with GIT_PS1_SHOW*.

If you don't want colored hints you can simply use $(__git_ps1 "(%s)") inside PS1 and sets GIT_PS1_SHOW* variables as you prefer.

To show colored hints you cannot edit PS1 directly. Instead, you have to call __git_ps1 function inside PROMPT_COMMAND variable. If PROMPT_COMMAND is set, the value is interpreted as a command to execute before the printing of primary prompt. In this mode you can request colored hints using GIT_PS1_SHOWCOLORHINTS=true.

Add the following code at the end of ~/.bashrc file:

source ~/.git-prompt.sh

GIT_PS1_SHOWDIRTYSTATE="true"
GIT_PS1_SHOWSTASHSTATE="true"
GIT_PS1_SHOWUNTRACKEDFILES="true"
GIT_PS1_SHOWUPSTREAM="auto"
# Colored hints work only if __git_ps1 is called inside PROMPT_COMMAND
GIT_PS1_SHOWCOLORHINTS=true

PROMPT_COMMAND='__git_ps1 "$(exit_status=$? ; if test $exit_status -ne 0 ; then echo -e "(\[\033[31m\]err\[\033[0m\])${debian_chroot:+($debian_chroot)}" ; else echo ${debian_chroot:+($debian_chroot)} ; fi)\[\033[1;33m\]\u@\h\[\033[0m\]:\[\033[1;36m\]\w\[\033[0m\]" "\$ " "(%s)"'

source ~/.git-prompt.sh will load git-prompt.sh script.
GIT_PS1_SHOW* variables are used to add additional features.
If __git_ps1 is used inside PROMPT_COMMAND it must be called with at least two arguments, the first is prepended and the second appended to the state string when assigned to PS1. There is an optional argument used as printf format string to further customize the output (%s is the output of __git_ps1 which in this case is wrapped in parenthesis).

For more info read comments inside ~/.git-prompt.sh file.

External resources

Lazy load images with Webpack

Luca — Sat, 15 Sep 2018 13:05:04 +0000

Automatically include all images from a folder with require.context and load them only when needed using dynamic import. A great way to optimize your site (or application) bandwidth, loading time and caching.

Source code

learn-webpack/lazy-load-multiple-images

How to

Lazy import an image

We can import an image as module thanks to file-loader which parse it and return its resolved path.

Create a function to dynamic import() an image, returns its parsed path and set it to <img> src attribute.

const lazyLoadImage = (imageName, img) => {
  import(
    /* webpackMode: "lazy-once" */
    `./images/${imageName}`
  )
  .then(src => img.src = src.default)
  .catch(err => console.error(err));
};

export default lazyLoadImage;

By default dynamic import create a new chunk for each imageName, instead we want to create a single chunk for all images. To do so we use /* webpackMode: "lazy-once" */ which generates a single lazy-loadable chunk that can satisfy all calls to import(). This is useful to prevent additional and unnecessary network requests when images are called. Read the list of webpackMode for more information.

Generate an image element

Create a function which generate an <img> element, append it to a dom container, and run lazyLoadImage function to set its src attribute.

import lazyLoadImage from './lazyLoadImage';

const generateImage = (container, imageName) => {
  const img = document.createElement('img');
  container.appendChild(img);

  lazyLoadImage(imageName, img);
};

export default generateImage;

Get images names

We need to get each imageName to use them in lazyLoadImage function. Use require.contex to import all .jpg images from ./images folder and match only their name with extension.

const getImagesNames = () => {
  const r = require.context('./images', false, /\.jpg$/);

  // return an array list of filenames (with extension)
  const importAll = (r) => r.keys().map(file => file.match(/[^\/]+$/)[0]);

  return importAll(r);
};

export default getImagesNames;

Generate all images

Create a javascript file called images.js that, when imported, will lazy-load and generate all images.

import getImagesNames from './getImagesNames';
import generateImage from './generateImage';

const images = document.querySelector('#images');
const imagesNames = getImagesNames();

// generate <img> element
// lazy-load each image and set its src attribute
// append <img> to #images container
imagesNames.forEach(name => generateImage(images, name));

Lazy load all images

You can now lazy-import images.js to generate all the images at once when needed.

if (somethingHappen) import(
  /* webpackPrefetch: true */
  './images'
);

By using webpackPrefetch: true, a link to the lazy-chunk will be placed in the <head> tag. A prefetched chunk is downloaded while browser is idle, and stored in the browser cache for later use.

<link rel="prefetch" as="script" href="0.js">

More information in prefetching-preloading-modules and link-rel-prefetch-preload-in-webpack and preload-prefetch-and-priorities-in-chrome.

Notes

Inspect devtools network tab while viewing the app. Make sure to not disable cache in devtools, otherwise the prefetched chunk will not be served from the cache.

You can add webpackMode: "eager" instead of webpackPrefetch: true if you want to include images.js inside the main bundle.

This article is part of my learn-webpack repositories collection.