Tutorial for webpack 4 - part 07 - multiple JS files for a page

webpackBundling JS files was the first task that webpack did in the tutorial. That was easy because the bundling starts from entry points which are nothing else than JS files. My case was simple - each entry point was a single JS file. Unfortunately, that is not a common scenario. It often happens that one page depends on multiple JS scripts. Can webpack handle it?



Table of contents

If you want to jump to other parts of the tutorial, use table of contents.


Second JS file on page

Until now the application had two HTML pages, each one required a single JS file.

html with js



Now, I make it more realistic so results.html requires:

  • results.js as previously,
  • urlparams.js is needed by results.js as the former defines getUrlParam helper function used by the latter.

 html with multi js

Here is how I defined urlparams.js:

"use strict";

var urlparams = (function() {
function getUrlParam(param) {
const url = new URL(window.location.href);
return url.searchParams.get(param);
return {
getUrlParam: getUrlParam

module.exports = {
getUrlParam: urlparams.getUrlParam

One function is exported - getUrlParam which makes it available for other JS scripts. It is ECMAScript 6 (2016) syntax. It is supported by almost all the most popular browsers except Internet Explorer. There is a solution to it but I will take care of it in a separate article.

An exporter function can be imported in a different file. I did it in results.js:

"use strict";

import '../styles/main.scss';
import * as urlParams from './urlparams.js';

function() {
function getYearFromUrl() {
return urlParams.getUrlParam("year");

It is also a syntax from ECMAScript 6 and it means that all exported functions are put to urlParams namespace. That is why it is referenced with that  way later.



All should work now. Let's build the package.

npx webpack --mode=development

If I take a look at dist directory, I can see no major change. There are still only two JS files. I cannot see the third one but that is fine. Just open results.bundle.js and you will see that the code from urlparams.js is in there. Splitting code to multiple files is for developer not for browsers. Some files are merged together in the minification process by webpack for better performance.

bundle scss


You can open dist/races.html in the browser and check that everything still works well.



It was just a simple example but it showed how to split JavaScript code to multiple files and not break webpack configuration.

Source code created in this part is on tutorial/part07-many-js-files-per-page branch on GitHub.


Next part

Tutorial for webpack 4 - part 08 - external JS library (jQuery)

We use cookies

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.