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)