Webpack

Loaders & Plugins

By Frank Lyder Bredland

A talk about Webpack

You might want to open this presentation on your computer

The presentations URL:

Prerequisites

• Your own computer
• A text editor or IDE
• Knows how to use the terminal
• Node.js and npm

Tip for working with Node.js

Setup the following in your path:

export PATH=$PATH:./node_modules/.bin

Tip for working with Node.js

If you don't want to mess with enviroment variables you can install npx

npm i -g npx

But for MacOS and Linux users I recommend the first solution

The presentations URL:

Overview

• Short introduction
• What is Webpack?
• How does Loaders work?
• Exercises
• What about Plugins?

Webpack

Bundeling it all together

Webpack

Setting up Webpack

Installing:

 npm i --save-dev webpack webpack-cli 

Usage:

webpack --mode development

Webpack assumes that the file ./src/index.js exists.

Webpack can be configured to handle all kinds of files

• HTML
• CSS and/or SASS
• Image files
• Font files
• And any other files you configure...

How does webpack handle all these kind of files?

Loaders!

A loader is simply a function that takes some code inn and returns a processed version

module.exports = source => {
   return source
      .replace(/\<code\>(([\n]|.)+?)\<\/code\>/gi,
         (matches, g1) => {
   const code = g1.replace(/</g, '<').replace(/>/g, '>');
   return `<code>${code}</code>`;
});

One loader you should know about:

debug-loader

Exercises

Example loader projects

Exercises

What about plugins?