Getting Started with Webpack

What is Webpack?

According to the documentation for webpack, it is a module bundler whose purpose is to bundle files for usage in a browser. It is important to note that the minimum version of node to run Webpack 5, the newest version of webpack, is Node version 10.13.0. Webpack is used to process the files from an application and build a dependency graph from one or more entry points. It then combines the files into one or more bundles which are static assets to serve the content from. This can be useful for improving the performance of your website by reducing the number of files that need to be loaded, and by allowing you to use modern JavaScript language features that may not be supported by older browsers.

Getting Started with webpack

To get started with webpack, you will need to install it using npm, the package manager for JavaScript. It is also important to note, that since version 4 of webpack, you will also need to install webpack CLI. This is because the command line interface for webpack was removed from the main package and added to its own repository. You can achieve both of these installations by entering the following command in your terminal:

npm i -D webpack webpack-cli

This will install webpack itself, as well as the command line interface needed to interact with webpack from the terminal as development dependencies. Installing webpack, or any npm package as a development dependency simply means that it will only be used during the build process and will not be included in your final bundle. As of webpack version 4, webpack provides default configuration settings on installation which makes it very easy to use right out of the box. This is great, but quite often with more complex applications, you as a developer will need to create a configuration file to instruct webpack how to handle each file type.

webpack.config.js

With no configuration, webpack will assume that your entry point of your code is in src/index.js, but this can be reconfigured to suit your needs. An extremely basic webpack setup will look something like this:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

In this example, ./src/index.js is the entry point for your code. This is the file that webpack will start from when building your bundle. The output section specifies the name and location of the generated bundle file. If you wanted to change the location of either the entry point or the output location, it is as simple as updating the path to either within the webpack.config.js file.

Once you have created your webpack.config.js file, you can run webpack from the command line by running the following command:

./node_modules/.bin/webpack

.
Additionally, you could write some scripts within your package.json file to run webpack for you by running a simple command, which is often:

npm run build

Core concepts of webpack configuration

• Entry
  As stated above, an entry point tells webpack where to start when building its internal dependency graph. Webpack is then able to figure out which other modules or libraries that entry point is depending on. There is often only one entry point needed, however, you can specify multiple by setting an entry property in the webpack configuration.

• Output
  The output property in webpack's configuration file determines the location and filename of the bundles that are generated by webpack. By default, webpack will output the main bundle to ./dist/main.js and any other generated files to the ./dist folder. You can customize this by specifying an output field in your webpack configuration file.
  

const path = require('path');

module.exports = {
  // ...other webpack options

  output: {
    filename: 'my-bundle.js',
    path: path.resolve(__dirname, 'build')
  }
};

In this example, the output property specifies that the generated bundle should be named my-bundle.js and should be placed in the build directory. This allows you to customize the output location and filenames of your webpack bundles.

• Loaders

Webpack loaders are an essential part of the webpack bundler. Loaders allow webpack to process various types of files and convert them into a format that can be bundled and served to the client.

At a basic level, loaders are transformations that are applied to the source code of a module. They can be used to pre-process files before they are added to the webpack bundle. This allows you to import different types of files, such as TypeScript or SCSS, and have them transformed into JavaScript that can be executed in the browser.

To use a loader, you need to include it in your webpack configuration file. You can specify which files should be processed by a particular loader using a regular expression. For example, this configuration would use the TypeScript loader to process all files with a .ts or .tsx extension:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        use: 'ts-loader'
      }
    ]
  }
};

Once a loader has been added to the configuration, you can import the relevant files in your code and webpack will automatically apply the transformation when bundling your application.

• Plugins

Webpack plugins are a powerful way to extend the functionality of the webpack bundler. Unlike loaders, which are used to transform individual files, plugins operate at a higher level and provide a wide range of functionality, from bundle optimization and minification to defining environment variables and adding additional features to the bundling process.

To use a plugin in webpack, you need to include it in the plugins array in the webpack configuration file.

Once a plugin has been added to the configuration, it will be automatically applied during the bundling process. Depending on the plugin, this may involve modifying the bundled code or adding additional functionality to the bundler itself.

There are many plugins available for webpack, and they can greatly enhance the capabilities of the bundler. Some popular plugins include the CleanWebpackPlugin, which can be used to remove old, unused files from the output directory, and the HtmlWebpackPlugin, which can be used to generate an HTML page to host the bundled code.
Plugins can provide a wide range of additional functionality to the bundler. They are an essential part of the webpack configuration and can greatly simplify and improve your development workflow.

• Mode

In webpack, the mode option is used to specify the environment in which the bundled code will be used. This option can take one of two values: production or development.

When running webpack in production mode, the bundler will apply optimizations to the output code to make it as small and efficient as possible. This can include minification, tree shaking, and other techniques to reduce the size of the bundled code.

In development mode, webpack will generate unoptimized code that is easier to debug and work with. This mode may also include additional features such as hot module replacement, which allows you to update modules in the browser without reloading the page.

The mode option can be specified in the webpack configuration file:

module.exports = {
  mode: 'production'
};

It can also be specified when running webpack on the command line:

webpack --mode=production

Conclusion

Webpack is a powerful and versatile tool that can help you organize and optimize your front-end code. By using webpack, you can write modular, maintainable code that can be easily loaded and executed in the browser. Hope you enjoyed reading!

Sources:
Webpack Docs
YouTube Webpack v5 Crash Course
Beginner's Guide to Webpack