Nonetheless, Webpack is important to know in the current state of web programming. I used Webpack for the first time to bundle my React prototype application (and went on to use it on the website you are currently viewing!). My previous discovery post went over the React portion of my prototype application. This post looks at the Webpack portion and some of the interesting configuration pieces. I'm not giving a tutorial on how to build a Webpack config - instead focusing on things I've learned about the bundler and my initial observations.
Because of plugins, Webpack has the ability to perform a wide range of tasks besides bundling. Plugins in Webpack intercept events during the bundling process1. Examples of plugins I use in my configuration are
ExtractTextPlugin (which extracts CSS out of the bundled file created by Webpack) and
HotModuleReplacement (live swapping of modules during development2). How plugins actually work in the bundling pipeline is beyond the scope of this post, but is something worth learning to better understand Webpack.
In order to work with Webpack you need to create a configuration file (although with Webpack 4 you don't necessarily need it for extremely simple applications). Here is the basic layout:
This configuration can be broken down into a few important concepts: entries, outputs, loaders, and plugins.
An entry point in a Webpack configuration is a path to a module. This module is the root module in Webpack's internal dependency graph. From this module Webpack will find all other referenced modules, adding them to the graph3.
In the configuration file the entry point is specified with the
entry property. Configurations can have multiple entry points, and Webpack will create multiple dependency graphs in that case.
The output determines a location to write the bundle files created by Webpack. You can also specify a filename to write the bundle to along with more advanced configurations. The output point is specified with the
Plugins intercept events during the bundling process, and can do a wide range of tasks. These tasks extend the capabilities of Webpack. Plugins are configured in the
With these definitions in mind, we can make some assumptions about the previously shown Webpack configuration. The root of the dependency graph is the
src directory as specified by the input. The output directory is
dist and the output filename is specified as
[name].js. These brackets specify a placeholder value. When Webpack runs, the
[name] placeholder is replaced with the property name specified in
entry. Since the entry point is declared as
bundle: PATHS.app, the output file is
The only plugin in the configuration,
HtmlWebPackPlugin, creates a root HTML file for a client side project. This HTML file includes
HtmlWebPackPlugin() constructor function specifies the name of the created HTML file (
index.html) and a template file to base the created HTML file off of (located at
/src/index.html). The created index.html file is located in the output directory (
dist) after Webpack runs.
I find that many Webpack configurations look complex at first sight. However, it gets easier to understand when I remember they simply boil down to entries, outputs, loaders, and plugins.
Now let's analyze some cool things the Webpack configuration does in my prototype.
This configuration specifies three loaders -
sass-loader. Confusingly Webpack executes loaders from right to left - so
sass-loader is executed first.
sass-loader compiles Sass to CSS, and then
css-loader creates a dependency graph of CSS files by linking
@import statements and
url() blocks as dependencies6. These styles are then inlined in the projects HTML file inside a
<style> tag. When viewing the website, elements appear styled according to the projects stylesheets.
This setup is perfect for a development environment. Unfortunately inline styles are not recommended in a production environment7. An alternative to inlining styles is to separate them out into their own bundle. This can be done with the
In this code snippet I extract the CSS styling into a bundle. The bundle has a placeholder name
[name].css. Now the HTML file that Webpack produces will have a
<link> element referencing the CSS stylesheet.
There are many cool things you can do with Webpack. These configurations along with development servers and hot module replacement helped make development work and code deployment a breeze.
You can check out my Webpack config and React prototype on GitHub.