Up & Running Quickly with webpack

A tutorial for setting up a basic workflow with webpack. webpack allows you to bundle project assets and modules efficiently and is an incredibly valuable tool in the front-end development workflow.

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.

Nothing matches your search.

{{ post.title }}