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.
After bundling our scripts together, we can reference a single
<script>. Additionally, this bundled file will be minified.
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.
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).
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.
As an example, let’s use jQuery for our project. We’ll install it and save it as a dependency.
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.
Next, we’ll create an
index.html as the entry point for our project and reference our script.
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 directory and
bundle.js will be generated by webpack.
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.
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:
webpack.config.js file, we’ll
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.
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:
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.