Webpack

I've heard the term Webpack a few times now and I still don't really know what it is or what it does exactly. To give myself a bit of a head start when I eventually start using Webpack I decided to do some research on it and write this article to better understand it.

What is Webpack?

First off, what is it?

Webpack is a buildprocess for JavaScript applications that bundles and converts code into something the browser can understand. If you're working with JavaScript modules, Next.js or SASS the browser doesn't directly understand what is being written. But if you use Webpack it can all be converted and bundled into JavaScript (with the use of Babel) and CSS the browser can understand. In a way it's similair to Gulp, which also bundles and optimizes your code when working with the programming languages I just described.

How to use Webpack

Installation

To use Webpack you need to install it first. Just like other build processes it can be installed via npm. And to be able to use it in the command line you also have to install the Command Line Interface (CLI).

$ npm install --save-dev webpack
$ npm install --save-dev webpack-cli

Config

To avoid having to type a long list of commands into the CLI you can use a webpack config file (webpack.config.js) to the most of the work for you. But according to the Webpack website it isn't strictly required to have one as of version 4.

A config file can be automaticly generated with

$ npx webpack --config webpack.config.js

or

$ npx webpack-cli init

Config files can get really complicated and can change depending on the case you use it in. There are different config file type you use in certain scenario's which can often be found on the internet for you to download.

Entry

The entry in a config file is the file Webpack should start from to bundle your code. Webpack will make an internal dependency graph which servers as a blueprint for all the dependencies and libraries that your app depends on.

File tree and output

Webpack will create a ./dist folder for the the source code to be be proccesed in to. This has to be specified in the config file as well.

module.exports = {
  entry: './path/to/my/entry/file.js',
};

Loaders

Webpack uses so called "Loaders" to change your code into differnet languages or bundled versions of your code. Loaders do the actually convering of your source code into the distribution code with the applied filters. It takes the source code as parameter and spits out the changed version in to you dist directory.

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js',
  },
  rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          },
          { loader: 'sass-loader' }
        ]
      }
    ]
};

test refers to which file or files should be transformed. An use refers to the name of the loader you want to use, or in aother words in what way you want to transform the source code.

It's also possible to use loaders inline inside your code. This is done by using an import. This allows you to overrule any loaders configured in the config file.

// Default
import Styles from 'style-loader!css-loader?modules!./styles.css';

// ! to disable all configured normal loaders
import Styles from '!style-loader!css-loader?modules!./styles.css';

// !! to disable all configured loaders (preLoaders, loaders, postLoaders)
import Styles from '!!style-loader!css-loader?modules!./styles.css';

// -! to disable all configured preLoaders and loaders but not postLoaders
import Styles from '-!style-loader!css-loader?modules!./styles.css';

Webpack plugins

According to the webpack website "Plugins are the backbone of webpack. webpack itself is built on the same plugin system that you use in your webpack configuration!". And there are a lot of plugins for Webpack that's I won't go in to detail about what they do. I'm guessing you use different plugins for specific situations. For a plugin to work you have to make a new instance of it by using new.

You can use plugins in your config file just like this.

plugins: [
    new webpack.ProgressPlugin(),
    new HtmlWebpackPlugin({ template: './src/index.html' }),
  ]

Or you can use it in your script by writing to following. Of course the name of the plugin will vary.

new webpack.ProgressPlugin().apply(compiler);

Build script

Just like with Gulp or other build processes you can make a build script in your package.json.

"scripts": {
   "build": "webpack"
}

Wrapping up & why use webpack

As I mentioned there are other solutions out there to bundle your code. Well because the development environment is greatly expanding there are always new langueages and new ways of development in the works. To make it easy why not make use of the different options out there and have them work together by bundeling them with Webpack.

Webpack also supports modules. Which on themselves greatly simplify complex code and allow for better scalebility of large applications. So why not use Webpack with modules because is also supports a lot of module formats.

Webpack is widely used and accepted. There is a lot of documentation about it and when scouring the internet for fixes to you problems there will most likely be selutions on a lot of forums that will help you fix the issue.

I'm not sure yet when I will be using it. Probably on larger scale projects where code can get messy with a lot of different languages. But at least now I know what it is, what it does and the basics on how to use it. But Obiously I still have to actually try it.

Sources:

https://webpack.js.org/

https://www.youtube.com/watch?v=nfmvexyoHXE