
webpack — What is it and Why Would you Use it??
Module bundlers, like webpack and Browserify, have become a ubiquitous part of the front-end development workflow. Module bundlers allow us separate program functionality into distinct parts to be recombined into a single unit at production time. Separating programs into distinct, functional chunks greatly increases the maintainability of code, as it forms a clear delineation between the various working components within a project.
Consider the following example, wherein we make use of several disparate scripts within a single page. For each script, we must link to a separate file, which in this example is relatively simple, but you might easily imagine an example of a complex project that requires several scripts. Each time we link to a <script>
, the browser must make a request, which increases load-time.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>webpack Test Project</title>
</head>
<body>
<script type="text/javascript" src="script-1.js"></script>
<script type="text/javascript" src="script-2.js"></script>
<script type="text/javascript" src="script-3.js"></script>
<script type="text/javascript" src="script-4.js"></script>
</body>
</html>
After bundling our scripts together, we can reference a single <script>
. Additionally, this bundled file will be minified.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>webpack Test Project</title>
</head>
<body>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
Installing webpack
Installing webpack is quite simple, especially if you’re familiar with installing modules with npm. If you haven’t used npm, then I suggest first researching a typical workflow with with npm. A good place to start is the npm official documentation.
mkdir webpack-test-project
cd webpack-test-project
npm init
Running npm init
will take us through the process of generating a package.json file, which contains information about our project and stores all of our npm project dependencies.
Now that we have our package.json
file, we’ll install webpack as a development dependency by adding the --save-dev
flag. This will install webpack locally and save it to our package.json
file as a package dependency (see package.json
to see webpack added).
npm install webpack --save-dev
Basic Bundling
Module Includes
With webpack installed, we can use it to bundle our assets and modules together. We’ll create an index.js
file from which we’ll include our modules and write some of our app logic.
touch index.js
As an example, let’s use jQuery for our project. We’ll install it and save it as a dependency.
npm install jquery --save
To access it within our index.js
file, we’ll assign it to a variable and require
it. Let’s test our app by creating a simple “Hello World” statement using jQuery.
var $ = require('jquery');
$('#hw').html('Hello World');
Next, we’ll create an index.html
as the entry point for our project and reference our script.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>webpack Test Project</title>
</head>
<body>
<div id="hw"></div>
<script type="text/javascript" src="./dist/bundle.js"></script>
</body>
</html>
Bundle!
To bundle our index.js
file with jQuery, we’ll run the webpack
command followed by our entry point, index.js
, and specify the name and location of our webpack-generated bundle, ./dist/bundle.js
. The dist
directory and bundle.js
will be generated by webpack.
webpack index.js ./dist/bundle.js
With that command executed, we should now have a single script file containing our app logic and included modules. In this case we’re only including a single module, but you could probably see how this workflow is incredibly handy for dealing with large and complex projects with several dependencies.
webpack Config
At this point our bundling with webpack works just fine, except that having to specify both the entry point and destination for our scripts every time we’d like to build is cumbersome and increases the possibility of inconsistencies. We can streamline this process by using a webpack configuration file:
touch webpack.config.js
Within our webpack.config.js
file, we’ll require
the path
module, a module that ships with node and which simplifies working with file paths. webpack expects a configuration object, in which we can specify the entry point for our scripts and the location for our bundled output.
var path = require('path');
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
Now, instead of typing webpack index.js ./dist/bundle.js
into our console every time we’d like to bundle our assets, we can just use the webpack
command and webpack will look to our config file and bundle our assets appropriately:
webpack
Wrap-up
Bundling with webpack is really just the tip of the webpack iceberg. Webpack can do a surprising number of useful things, and while it has a relatively steep learning curve, it is quite powerful. I’ve been using it regularly in my workflow as it comes preconfigured with Vue-CLI, but because it comes preconfigured, I wasn’t familiar with its fundamental workings. This exercise was an attempt to disassemble and recreate the incredibly useful black box that is webpack.