Webpack Essentials

Let's unpack what a module bundler is and why we need it.

A module bundler intelligently creates a bundle for us, like which module depends on which to create a dependency graph. It can make certain transformations on our modules before adding them to our bundle. e.g. transforming SASS to CSS or ES6 to ES5 using BABEL.

How to install Webpack?

npm install webpack webpack-cli --save-dev

Webpack configurations:

We make a config file named webpack.config.js file. It exports an object -

// webpack.config.js file

module.exports = {
    // we write our webpack configurations here...
};

Webpack needs to know 3 things to create a bundle(s)

1. entry point of our app

In the webpack.config.js file we need to write an entry property

// webpack.config.js file

module.exports = {
    entry: "./app/index.js"
};

2. which transformations

Loaders for getting the ability to process different types of files. By default, we have only the ability to process .js and .json files.

e.g. svg loader

Let's install svg loader

npm install svg-inline-loader --save-dev

We need to add some configuration rules for svg-inline-loader in the module property

// webpack.config.js

module.exports = {
    entry: "./app/index.js",
    module: {
        rules: [
            {
                test: /\.svg$/,
                use: "svg-inline-loader"
            }
        ],
    },
};

e.g. css loader

Let's install css-loader

npm install css-loader --save-dev

Now, we need to add configuration rules for css-loader

// webpack.config.js

module.exports = {
    entry: "./app/index.js",
    module: {
        rules: [
            {
                test: /\.svg$/,
                use: "svg-inline-loader"
            },
            {
                test: /\.css$/,
                use: "css-loader"
            }
        ],
    },
};

Adding these rules will allow us to import CSS files in our application, but this doesn't mean that those CSS styles are injected into the DOM to be active.

For that we need style-loader

npm install style-loader --save-dev

Add style-loader element to the use property of rules

// webpack.config.js

module.exports = {
    entry: "./app/index.js",
    module: {
        rules: [
            {
                test: /\.svg$/,
                use: "svg-inline-loader"
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            }
        ],
    },
};

e.g. babel loader

Let's install babel-loader

npm install babel-loader --save-dev

Add babel-loader

// webpack.config.js

module.exports = {
    entry: "./app/index.js",
    module: {
        rules: [
            {
                test: /\.svg$/,
                use: "svg-inline-loader"
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            },
            {
                test: /\.(js)$/,
                use: "babel-loader"
            }
        ],
    },
};

3. output location of bundle

Finally, we need to tell our bundler where we need to put the output of the bundler in the output property.

This is how our webpack.config.js file will look finally.

// webpack.config.js
const path = require("path");

module.exports = {
    entry: "./app/index.js",
    module: {
        rules: [
            {
                test: /\.svg$/,
                use: "svg-inline-loader"
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            },
            {
                test: /\.(js)$/,
                use: "babel-loader"
            }
        ],
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "index-bundle.js"
    }
};

What's the difference between Loaders and Plugins?

Loaders work on the files before or while the bundle is generated.

Plugins execute tasks after the bundle is created. In general, plugins are more powerful than loaders.