close icon
Webpack

Zero Config JavaScript App Prototyping with Webpack

Learn how to easy prototype JavaScript apps using the zero config feature of Webpack 4.

November 21, 2018

Sometimes you don't need a framework like Angular or React to demonstrate an idea or concept in JavaScript. You just want a framework-agnostic, plain JavaScript development environment to play around with things like web workers, service workers, new JavaScript constructs, or IndexedDB, for example. In this blog post, you are going to learn how to quickly prototype plain JavaScript apps using webpack 4 to create such environment with zero config and low development overhead.

Webpack is a leading static module bundler for frontend apps. It is used by tools such as create-react-app to quickly scaffold frontend projects. According to the webpack documentation, since version 4.0.0, webpack doesn't require a configuration file to bundle your projects; however, the module bundler remains highly configurable to meet the increasing complexity of your projects down the line.

"With webpack 4 zero config, you can stop scratching your head on how to spin a JavaScript app quickly and avoid overengineering a quick proof of concept using a framework when JavaScript is enough."

Tweet

Tweet This

You can find the final version of this exercise on the webpack-prototype repo on GitHub. However, I encourage you to read on and build the webpack app prototype gradually to better understand the heavy lifting that webpack is doing for you.

Webpack 4 prototyping - Learn webpack localhost page

Setting Up Zero Config Webpack 4

Head to your terminal and make a directory where you want to store your learning project your current working directory. Then, create a folder named webpack-prototype and make it your current working directory. You can do this easily with the following command:

mkdir webpack-prototype && cd webpack-prototype

This line of commands creates the webpack-prototype directory and then makes it the current working directory.

Once there, create a new NPM project and install webpack locally along with the webpack-cli:

npm init -y
npm install webpack webpack-cli --save-dev

webpack-cli is the tool used to run webpack on the command line.

Next, create a simple file structure under this directory that resembles the following:

webpack-prototype
  |- package.json
  |- /dist
    |- index.html
  |- /src
    |- index.js

package.json is already provided to you when you created the NPM project.

By default, webpack 4 will look for a src/index.js file to use as an entry point. The entry point tells webpack which module it should use to start building its internal dependency graph. From this module, webpack can infer which other modules or libraries the application depends on and include them in your bundle.

Webpack static module bundler with dependencies graph example

Source

Also, webpack uses dist/index.html as the default main HTML file for your application where the generated bundle will be automatically injected.

Thus, the src directory holds all of your application source code (the code that you'll create from scratch, write, delete, edit, and so on). The dist directory is the distribution directory for the application. This directory holds code that has been minimized and optimized by webpack. In essence, the dist directory holds the webpack output that will be loaded in the browser once the application is run.

You can create these files quickly by issuing the following commands:

macOS / Linux:

mkdir src dist && touch dist/index.html src/index.js

Windows:

mkdir src dist && echo.> dist/index.html && echo.> src/index.js

mkdir is used to create directories across operating systems. However, touch>) is only available in Unix and Unix-like operating systems. echo is a Windows equivalent of touch. echo. creates a file with one empty line in it.

Open the project in your preferred IDE or code editor.

You can run code . or webstorm . to open the current working directory if you have installed the command line tools for Visual Studio Code or WebStorm.

Give some life to dist/index.html by adding the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Webpack Prototype</title>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>

Within the <body> tag, you load a main.js file through a <script> tag; however, you have not created such file:

<script src="main.js"></script>

No worries. main.js will be created automatically for you by webpack once it creates your project bundle.

As a precaution, to prevent publishing your code to NPM by accident, open package.json and do the following:

  • Add "private": true, as a property.
  • Delete the "main": "index.js", line.

package.json should look like this:

{
  "name": "webpack-prototype",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.25.1",
    "webpack-cli": "^3.1.2"
  }
}

Now, give some life to src/index.js. For now, add a simple message on the screen:

// src/index.js

const createElement = message => {
  const element = document.createElement("div");
  element.innerHTML = message;
  return element;
};

document.body.appendChild(createElement("Webpack lives."));

Finally, to test everything is working as intended, you need to create a bundle. This can be done by issuing the following command:

npx webpack

Using npx, you can emulate the same behavior of the global installation of webpack but without the actual global installation. npx uses the local version of webpack you installed earlier.

If you have npm >= 5.2 installed in your system, you have npx available.

However, running this command from the command line is not efficient or too memorable. A better approach is to create a build NPM script in package.json which does the same thing as npx webpack:

{
  "name": "webpack-prototype",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.25.1",
    "webpack-cli": "^3.1.2"
  }
}

Now, you can run npm run build instead which is a more familiar command for JavaScript developers.

Running webpack does the following:

  • Use src/index.js as the entry point.
  • Generate dist/main.js as the webpack output.

Notice that there is a warning when you build your app: WARNING in configuration. The 'mode' option has not been set. You'll learn soon about this in this blog post.

Verify that the bundle was created correctly by doing the following:

  • Open the dist directory. Do you see the main.js file there? If yes, the output worked.
  • If you are curious, open main.js. Observe the file consists of a highly minimized one-line of JavaScript code.
  • Open dist/index.html in the browser. You should see Webpack lives. printed on the screen.

Webpack output being used to display data in the browser

To open dist/index.html, find the file through the file system and double-click it. Your default browser should then open the file.

Change the message string in src/index.js to the following:

// src/index.js

const createElement = message => {
  const element = document.createElement("div");
  element.innerHTML = message;
  return element;
};

document.body.appendChild(
  createElement("Webpack lives by the love of Open Source.")
);

Reload the browser tab presenting index.html. Notice that the printed message doesn't change. For it to change, you need to update your output bundle. To do this, you'll need to execute npm run build again to re-create the bundle and then refresh the page. Run the command and refresh the page. Webpack lives by the love of Open Source. should now be shown on the screen.

Webpack updated output being used to display data in the browser

This is not optimal. What you want is Hot Module Replacement to exchange, add, or remove modules while an application is running and without requiring a full reload.

What are the benefits of enabling Hot Module Replacement for you as a developer?

  • During a full reload, the state of your application is lost. HRM lets you retain your app state.
  • By only updating what has changed in the app, you can save time.
  • Changes in your source CSS and JavaScript files are shown in the browser instantaneously which closely resembles an update done directly through the browser's dev tools.

To enable HRM, follow this steps:

  • Install webpack-dev-server which provides you with a simple web server with the ability to live-reload your app:
npm install webpack-dev-server --save-dev
  • Create a start:dev NPM script within package.json:
{
  "name": "webpack-prototype",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start:dev":
      "webpack-dev-server --mode development --content-base dist/ --open --hot"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.25.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  }
}

That start:dev NPM script is a mouthful. What's it doing?

{
  // ...
  "scripts": {
    // ...
    "start:dev":
      "webpack-dev-server --mode development --content-base dist/ --open --hot"
  }
  // ...
}

webpack-dev-server: Runs the webpack dev server.

--mode development: The mode configuration option tells webpack to use its built-in optimizations accordingly. development produces a much more readable output than production. If you leave this option out, the default option is production. You may also set it to none which disables any default behavior.

Learn more about the differences between the webpack development and production modes here.

--content-base dist/: Tells the dev server from where to serve your static content. By default, webpack-dev-server will serve the files in the current directory. However, in this case, you want the content to be served from dist/ where your index.html file is.

--open: Opens the default app url in the system's default browser. Here, it's http://localhost:8080/.

--hot: Enables Hot Module Replacement by adding the HotModuleReplacementPlugin and switching the server to hot mode.

  • Run the webpack dev server:
npm run start:dev

Your default browser will open up, load http://localhost:8080/, and present you with your app again.

Do something crazy: stop the webpack-dev-server, delete the main.js file that was created earlier under the dist directory, and execute npm run start:dev again. The default browser will open again and you will see the message printed on the screen. How is that possible if you deleted main.js?

webpack-dev-server watches your source files and re-compiles your bundle when those file change. However, this modified bundle is served from memory at the relative path specified in publicPath. It is not written under your dist directory. If a bundle already exists at the same URL path, by default, the in-memory bundle takes precedence. This is all taken care of automagically by specifying this line on your index.html:

<script src="main.js"></script>

That's it! You can now add more complex code to src/index.js or import other modules to it. Webpack will build its internal dependency graph and include all these in your final bundle. Try that out!

Importing Modules Using Zero Config Webpack

Create another module that adds another element to the DOM. Under src, create banner.js:

macOS / Linux:

touch src/banner.js

Windows:

echo.> src/banner.js

Open this file and populate it with this:

// src/banner.js

const createBanner = () => {
  const link = document.createElement("a");
  link.innerHTML = "Learn Webpack with Sean.";
  link.href = "https://webpack.academy/";
  link.target = "_blank";
  return link;
};

export default createBanner;

Save the changes made to src/banner.js.

Then update src/index.js as follows:

// src/index.js

import createBanner from "./banner.js";

const createElement = message => {
  const element = document.createElement("div");
  element.innerHTML = message;
  return element;
};

document.body.appendChild(
  createElement("Webpack lives by the love of Open Source.")
);

document.body.appendChild(createBanner());

Save the changes made to src/index.js. Look at the browser. You'll now see the message Webpack lives by the love of Open Source. and a Learn Webpack with Sean hyperlink under it which on click takes you to the Webpack Learning Academy, a comprehensive webpack learning resource by Sean Larkin.

Webpack updated output being used to display data in the browser

The same principle can be applied to any modules installed in your project through npm. For example, if you want to use lodash, simply execute npm install --save lodash and import it in any file that needs it:

npm install --save lodash

Update src/banner.js as follows:

// src/banner.js

import _ from "lodash";

const createBanner = () => {
  const link = document.createElement("a");
  link.innerHTML = _.join(["Learn", "Webpack", "Today"], "*");
  link.href = "https://webpack.academy/";
  link.target = "_blank";
  return link;
};

export default createBanner;

Recall that when importing local modules you use ./relative-path-to-module as the module path. When importing NPM modules you use npm-module-name as the module path.

Save the changes on src/banner.js and look at the hyperlink in the browser update itself to look very 90's Retro: Learn*Webpack*Today.

Webpack updated output being used to display data in the browser

What about CSS?

Adding CSS Stylesheets to Zero Config Webpack

Does adding CSS files work the same as adding JavaScript modules? Find out! You can make the current page look prettier as follows:

  • Under src, create banner.css:

macOS / Linux:

touch src/banner.css

Windows:

echo.> src/banner.css
  • Open src/banner.css and populate it with the following:
/* src/banner.css */

.banner {
  position: fixed;

  background: #1a6db9;
  color: white;

  padding: 25px;
}

Save the changes made to src/banner.css.

Next update src/banner.js to import banner.css and add the banner class to the <a> banner element:

// src/banner.js

import _ from "lodash";

import "./banner.css";

const createBanner = () => {
  const link = document.createElement("a");
  link.innerHTML = _.join(["Learn", "Webpack", "Today"], "*");
  link.href = "https://webpack.academy/";
  link.target = "_blank";
  link.classList = "banner";
  return link;
};

export default createBanner;

Save src/banner.js and... you get the following error in the command line:

ERROR in ./src/banner.css 3:0
Module parse failed: Unexpected token (3:0)
You may need an appropriate loader to handle this file type.

A solution could be to move banner.css to the dist folder and call it from index.html using a <link> tag:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Webpack Prototype</title>

  <link rel="stylesheet" type="text/css" href="banner.css">
</head>

<body>
  <script src="main.js"></script>
</body>

</html>

This certainly works but you'll lose live reloading for that CSS file. Any changes made to dist/banner.css would require you to refresh the browser. As discussed earlier, that's not optimal. What can be done? Create a minimal configuration file to use a webpack loader to handle loading CSS files.

Extending Zero Config Webpack with Minimal Configuration

Under the root directory, create a webpack.config.js file:

macOS / Windows:

touch webpack.config.js

Windows:

echo.> webpack.config.js

In order to import a CSS file from within a JavaScript module using webpack, you need to install and add the style-loader and css-loader to the module configuration that will live within webpack.config.js. You can do that by following these steps:

  • Install style-loader and css-loader:
npm install --save-dev style-loader css-loader
  • Once those two packages are installed, update webpack.config.js:
// webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  }
};

The module rules use a regular expression to test which files it should look for and provide to the loaders specified under use. Any file that has a .css extension is served to the style-loader and the css-loader.

  • Save the changes on webpack.config.js.

  • Finally, you need to tell webpack-dev-server to use webpack.config.js as the configuration file through the --config option. You do that by adding the --config webpack.config.js option to the start:dev NPM script present in package.json:

{
  "name": "webpack-prototype",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start:dev":
      "webpack-dev-server --mode development --content-base dist/ --open --hot --config webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^1.0.1",
    "style-loader": "^0.23.1",
    "webpack": "^4.25.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  },
  "dependencies": {
    "lodash": "^4.17.11"
  }
}
  • Save the changes made on package.json.

Stop the webpack-dev-server and execute npm run start:dev again. Observe that now the 90's Retro banner has a blue background, padding, and white text:

Webpack updated output being used to display data in the browser

You can use this configuration file to add any other loaders you may need to address needs such as compiling SCSS to CSS, transpiling JavaScript, loading image assets, and many more. There are lots of webpack loaders to address different project tasks. Check the full webpack loader list.

"Learn how to create a minimal configuration extension to Webpack Zero Config to handle loading CSS files easily."

Tweet

Tweet This

For good measure, let's try loading images into our files as they are oftentimes part of a prototype.

A much better approach is to use images from a CDN.

Loading Images Using Webpack 4

Start by downloading the logo of webpack available here. Save it as webpack-logo.png and move it to the src directory.

Update src/index.js to import the image as follows:

// src/index.js

import createBanner from "./banner.js";

import WebpackImg from "./webpack-logo.png";

const createElement = message => {
  const element = document.createElement("div");
  element.innerHTML = message;
  return element;
};

document.body.appendChild(
  createElement("Webpack lives by the love of Open Source.")
);

document.body.appendChild(createBanner());

Save the file. As you may be thinking, an error is shown in the command line about this type of file, a PNG image, not being able to be loaded:

ERROR in ./src/webpack-logo.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.

As with CSS, you need an image loader. Follow these steps to add it to your webpack module:

  • Install the file-loader webpack loader:
npm install --save-dev file-loader
  • Add a new rule to module rules within webpack.config.js:
// webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/,
        use: ["file-loader"]
      }
    ]
  }
};

This time the regular expression in the rule test is looking for files that have popular image file extensions, such as .png and .jpeg.

  • Restart the webpack dev server.

The file loading error is now gone.

  • Update src/index.js to make use the of the image:
// src/index.js

import createBanner from "./banner.js";

import WebpackImg from "./webpack-logo.png";

const createElement = message => {
  const element = document.createElement("div");
  element.innerHTML = message;
  return element;
};

const createImage = image => {
  const element = document.createElement("div");
  const imageElement = new Image();
  imageElement.src = image;
  element.appendChild(imageElement);
  return element;
};

document.body.appendChild(
  createElement("Webpack lives by the love of Open Source.")
);

document.body.appendChild(createBanner());
document.body.appendChild(createImage(WebpackImg));

Take a look at the browser. The webpack logo now loads on the screen:

Webpack output in the browser with image assets loaded.

Your Webpack Zero Config configuration extension now includes the ability to load images. The config file still remains minimal, lightweight, and easy to understand.

Building a JavaScript App with Webpack 4

As a final note of this process, once you want to build your app again, simply execute npm run build.

The images imported into JavaScript modules will be processed and added to the dist output directory. Any image variables will have the final URL of that post-processing image, which may look like this:

dist/e5e245191fd9c9812bc78bd0cea9a12c.jpeg

You can also use your images within CSS files to add them as element backgrounds, for example.

Conclusion

For a simple and quick JavaScript prototype, JavaScript, CSS, and image assets are plenty to get a lot done. You are now empowered with knowledge on how to use webpack 4 to create a development environment for JavaScript projects with zero config needed. If the project requires CSS, you can extend the zero config to use CSS and file loaders to create beautiful JavaScript apps fast. As an alternative, if you prefer to, feel free to use cloud environments that use webpack 4 such as StackBlitz.

You can find a polished version of this exercise on the webpack-prototype repo on GitHub. The final version uses Google Fonts and an improved structure to create a much better looking webpack banner using webpack!

Webpack 4 new and updated prototype - Learn webpack localhost page

Aside: Auth0 Authentication with JavaScript

At Auth0, we make heavy use of full-stack JavaScript to help our customers to manage user identities, including password resets, creating, provisioning, blocking, and deleting users. Therefore, it must come as no surprise that using our identity management platform on JavaScript web apps is a piece of cake.

Auth0 offers a free tier to get started with modern authentication. Check it out, or sign up for a free Auth0 account here!

Then, go to the Applications section of the Auth0 Dashboard and click on "Create Application". On the dialog shown, set the name of your application and select Single Page Web Applications as the application type:

Creating JavaScript application

After the application has been created, click on "Settings" and take note of the domain and client id assigned to your application. In addition, set the Allowed Callback URLs and Allowed Logout URLs fields to the URL of the page that will handle login and logout responses from Auth0. In the current example, the URL of the page that will contain the code you are going to write (e.g. http://localhost:8080).

Now, in your JavaScript project, install the auth0-spa-js library like so:

npm install @auth0/auth0-spa-js

Then, implement the following in your JavaScript app:

import createAuth0Client from '@auth0/auth0-spa-js';

let auth0Client;

async function createClient() {
  return await createAuth0Client({
    domain: 'YOUR_DOMAIN',
    client_id: 'YOUR_CLIENT_ID',
  });
}

async function login() {
  await auth0Client.loginWithRedirect();
}

function logout() {
  auth0Client.logout();
}

async function handleRedirectCallback() {
  const isAuthenticated = await auth0Client.isAuthenticated();

  if (!isAuthenticated) {
    const query = window.location.search;
    if (query.includes('code=') && query.includes('state=')) {
      await auth0Client.handleRedirectCallback();
      window.history.replaceState({}, document.title, '/');
    }
  }

  await updateUI();
}

async function updateUI() {
  const isAuthenticated = await auth0Client.isAuthenticated();

  const btnLogin = document.getElementById('btn-login');
  const btnLogout = document.getElementById('btn-logout');

  btnLogin.addEventListener('click', login);
  btnLogout.addEventListener('click', logout);

  btnLogin.style.display = isAuthenticated ? 'none' : 'block';
  btnLogout.style.display = isAuthenticated ? 'block' : 'none';

  if (isAuthenticated) {
    const username = document.getElementById('username');
    const user = await auth0Client.getUser();

    username.innerText = user.name;
  }
}

window.addEventListener('load', async () => {
  auth0Client = await createClient();

  await handleRedirectCallback();
});

Replace the YOUR_DOMAIN and YOUR_CLIENT_ID placeholders with the actual values for the domain and client id you found in your Auth0 Dashboard.

Then, create your UI with the following markup:

<p>Welcome <span id="username"></span></p>
<button type="submit" id="btn-login">Sign In</button>
<button type="submit" id="btn-logout" style="display:none;">Sign Out</button>

Your application is ready to authenticate with Auth0!

Check out the Auth0 SPA SDK documentation to learn more about authentication and authorization with JavaScript and Auth0.

  • Twitter icon
  • LinkedIn icon
  • Faceboook icon