However, you don’t need to be using a front-end framework, or be working on a large-scale project to take advantage of it. Webpack is primarily a bundler, and as such you can also use it to bundle just about any resource or asset you care to think of.
In this article, I’m going to show you how to install and configure webpack, then use it to create minified bundles for a simple static site with a handful of assets.
But Why Would You Want to Do That?
Good question. Glad you asked!
And finally, it’s a fun learning exercise. Whether or not you employ any of these techniques in your own projects is down to you, but by following along you’ll get a firm understanding of what webpack does, how it does it and whether it’s a good fit for you.
Getting up and Running
The first thing you’ll need is to have Node and npm installed on your computer. If you haven’t got Node yet, you can either download it from the Node website, or you can download and install it with the aid of a version manager. Personally, I much prefer this second method, as it allows you to switch between multiple versions of Node and it negates a bunch of permissions errors, which might otherwise see you installing Node packages with admin rights.
We’ll also need a skeleton project to work with. Here’s one I made earlier. To get it running on your machine, you should clone the project from GitHub and install the dependencies:
git clone https://github.com/sitepoint-editors/webpack-static-site-example cd webpack-static-site-example npm install
This will install jQuery, plus Slick Slider and Lightbox2 — two plugins we’ll be using on the site — to a
node_modules folder in the root of the project.
After that, you can open
index.html in your browser and navigate the site. You should see something like this:
If you need help with any of the steps above, why not head over to our forums and post a question.
Introducing Webpack to the Project
The next thing we’ll need to do is to install webpack. We can do this with the following command:
npm install webpack webpack-cli --save-dev
This will install webpack and the webpack CLI and add them to the
devDependency section of your
"devDependencies": "webpack": "^5.1.3", "webpack-cli": "^4.0.0"
Next, we’ll make a
Now we can try and run webpack from the command line to see if it is set up correctly:
./node_modules/webpack/bin/webpack.js ./src/js/main.js --output-filename=bundle.js --mode=development
What we’re doing here is telling webpack to bundle the contents of
dist/bundle.js. If everything is installed correctly, you should see something like this output to the command line:
asset bundle.js 1.04 KiB [emitted] (name: main) ./src/js/main.js 192 bytes [built] [code generated] webpack 5.1.3 compiled successfully in 45 ms
And webpack will create a
bundle.js file in the
dist folder. If you have a look at that file in your text editor of choice, you’ll see a bunch of boilerplate and the contents of
main.js at the bottom.
Automating Our Setup
If we had to type all of the above into the terminal every time we wanted to run webpack, that’d be quite annoying. So let’s create an npm script we can run instead.
package.json, alter the
scripts property to look like this:
"scripts": "test": "echo "Error: no test specified" && exit 1", "build": "webpack ./src/js/main.js --output-filename=bundle.js --mode=development" ,
Notice how we can leave out the full path to the webpack module, as when run from a script, npm will automatically look for the module in the
node_modules folder. Now when you run
npm run build, the same thing should happen as before. Cool, eh?
Create a Webpack Configuration File
Notice how we’re passing the path of the file to bundle and the path of the output file as arguments to webpack? Well, we should probably change that and specify these in a configuration file instead. This will make our life easier when we come to use loaders later on.
webpack.config.js file in the project root:
And add the following code:
module.exports = entry: './src/js/main.js', mode: 'development', output: path: `$__dirname/dist`, filename: 'bundle.js', , ;
And change the npm script to the following:
"scripts": ... "build": "webpack" ,
webpack.config.js we’re exporting a configuration object, which specifies the entry point, the mode webpack should run in (more on that later), and the output location of the bundle. Run everything again and it should all still work as before.
Including the Bundle
Now that we have webpack generating a bundle for us, the next thing we need to do is to include it somewhere. But first, let’s create a different entry point, so that we can list the assets we want webpack to bundle for us. This will be a file named
app.js in the
Add the following to
And change the webpack config thus:
npm run build again to recreate the bundle. Everything should work as before.
Now, if you have a look at
main.js, which is responsible for showing more information when you click the Read more… link.
index.html to include the bundle instead of
main.js. Look at the bottom of the file. You should see:
<script src="http://www.sitepoint.com/./node_modules/jquery/dist/jquery.min.js"></script> <script src="./src/js/main.js"></script> </body> </html>
Change this to:
<script src="http://www.sitepoint.com/./node_modules/jquery/dist/jquery.min.js"></script> <script src="http://www.sitepoint.com/./dist/bundle.js"></script> </body> </html>
Refresh the page in the browser and satisfy yourself that the Read more… link still works.
Next, let’s add jQuery to the bundle. That will reduce the number of HTTP requests the page is making. To do this, we have to alter the
app.js file like so:
window.$ = require('jquery'); require('./main.js');
Here we’re requiring jQuery, but as we installed this using npm, we don’t have to include the full path. We’re also adding its usual
$ alias to the global
window object, so that it’s accessible by other scripts. We’re requiring
main.js after jQuery, as the former depends on the latter, and order is important.
index.html to remove the jQuery script tag:
<script src="http://www.sitepoint.com/./dist/bundle.js"></script> </body> </html>
npm run build and once again, refresh the page in the browser to satisfy yourself that the Read more… link still works. It does? Good!
How to Bundle a Simple Static Site Using Webpack