What is webpack? Why is it listed as part of my chapter on build automation systems? Let's find it out in this extract from chapter 6 of my upcoming "Front-end Development with ASP.NET Core, Angular, and Bootstrap".

webpack is a module bundler that loads all the dependencies of a JavaScript application and bundles them to optimize the loading time in the browser. Although it is not strictly speaking a task runner, webpack can be used to accomplish most of the tasks performed by Gulp, like minification, bundling, and linting. Let’s see how this works.

webpack’s main concepts

webpack has a bit steeper learning curve compared to Gulp, so before seeing some examples, let’s have a look at the main concepts: entry, output, loaders, and plugins.

It all starts with the entry point of the application, which is where webpack starts to follow the dependencies tree from. The end of the process is the output, which is where webpack will save the bundle once it has completed its job. Between the entry and the output, all the processing happens, which is done by loaders and plugins.

webpack is a JavaScript module bundler, which means that it discovers JavaScript modules and their dependencies and bundles them. However, webpack can also treat .css files, sass files, TypeScript files, and even images and .html files. Loaders are used to “convert” any kind of file in a module treatable by webpack. Plugins do not work on the individual source files but are used to perform general operations on the final output of the bundling.

The configuration of webpack is stored in a webpack.config.js file.

For example, the following configuration bundles all JavaScript files of the application (or at least the ones "reachable" from the entry point via ECMAScript 5 export/import of modules)

var path = require(‘path’);

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

The book covers the usage of webpack more in details. If you are interested, please consider pre-ordering my book.

Tomorrow I'm going to cover installation of ASP.NET Core on on-prem IIS. If you are interested, don't forget to check my blog again, subscribe to my RSS feed, follow me on twitter or like the Facebook page of my book.