Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

javascript
webpack
html
communitycreator

How to use an ES module and webpack

Oluwatobi Sofela

Overview

ES module is a file that allows us to export its code. This allows other JavaScript files to import and use the exported code as their dependencies.

Webpack is a tool developers use to bundle an application’s modules and dependencies into a single browser-compatible JavaScript file.

In the following steps, we’ll learn how to use an ES module and webpack.

Step 1: Create a project directory

To begin, we create a project folder, where this project’s files will reside.

Step 2: Go to the project’s root folder

We navigate to the root directory of our project using the command line, as follows:

cd path/to/project/root-directory

Note: A root directory is a folder containing all other files and sub-folders of a specific project.

In our case, the folder we created in step 1 is our root folder because it will house everything concerning this particular project.

Step 3: Create a package.json file

Next, we create a package.json file in our project’s root directory, as follows:

npm init -y

Note:

  • The -y flag instructs NPM to create a default package.json file.
  • We must have Node and NPM installed on our system for the initialization code above to work. We can get both by installing the latest LTS version from the Node.js website.

Step 4: Install the webpack module bundler

Next, we install webpack and webpack-cli locally into our project as development dependency libraries, using the following command:

npm install webpack webpack-cli --save-dev

Note:

  • The webpack-cli package makes running webpack on the command line possible.
  • The --save-dev flag tells NPM that we only need webpack and webpack-cli for our application’s local development and testing purposes.

Step 5: Create our project’s directories

Next, we create a source code folder (./src) and a distribution code folder (./dist) in our project’s root directory.

mkdir src dist

Step 6: Create our source code files

We then create the following files inside the newly created source code directory:

  1. index.html
  2. index.js

Step 7: Add the JavaScript file to our HTML document

We open our index.html file and replicate the code below:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES Module - CodeSweetly</title>
  </head>
  <body id="body">
    <h1>Module Bundler Tutorial</h1>
    <button id="button">Click Me to Change Color!</button>

    <!-- Add the "index.js" JavaScript file to this HTML document -->
    <script type="module" src="./index.js"></script>
  </body>
</html>

Here are the main things that we’re doing in the HTML snippet above:

  1. We create <h1> and <button> elements.
  2. We add the JavaScript file from step 6 above to our HTML document.
  3. We use the <script>'s type="module" attribute to convert the index.js JavaScript file to an ES module.

Note: When using a bundler, such as Webpack, we can omit the <script>'s type="module" attribute. The bundler will automatically treat all scripts containing import and export statements as modules.

Step 8: Install some dependencies

Using our text editor, we install our project’s dependencies locally.

For instance, here’s how we can install the randomcolor package as a local dependency:

npm install randomcolor --save

Note: The --save flag tells NPM that our app needs the randomcolor package in production.

Step 9: Import dependencies

Next, we import our dependencies into our JavaScript source code with an import statement.

For instance, here’s how we can use the import statement to bring in the randomcolor dependency from step 8 into our index.js script file:

// index.js

import randomColor from "randomcolor";

Note: The import statement is JavaScript’s native way of importing modules.

Step 10: Use the dependencies

We can now use the dependencies we imported in step 9.

For instance, here’s how we may use the randomcolor dependency:

// index.js

// Import the randomColor dependency:
import randomColor from "randomcolor";

// Initialize the bodyElement variable with the app's <body> element:
const bodyElement = document.getElementById("body");

// Initialize the buttonElement variable with the app's <button> element:
const buttonElement = document.getElementById("button");

// Define a changeBodyColor function:
function changeBodyColor() {
  // Initialize the color variable with the randomColor dependency's value:
  const color = randomColor();

  // Style the app's <body> element's background with the color variable's value:
  bodyElement.style.backgroundColor = color;
}

// Add a click event listener to the app's <button> element:
buttonElement.addEventListener("click", changeBodyColor);

In the snippet above, we are telling the computer that whenever a user clicks the buttonElement, it should do the following:

  1. Invoke the changeBodyColor function.
  2. Initialize the function’s color variable with randomColor's invocation output.
  3. Use the color variable’s value to style the bodyElement's background color.

Let’s now bundle up our entry point (the index.js module) and the randomcolor dependency into a single JavaScript file.

Step 11: Start the build step

Using our terminal, we go to our project’s root directory (where our ./dist folder is located). Then, we create our bundle by running the webpack, using the following command:

npx webpack

After running the command above, webpack will do the following:

  1. It will use our index.js as its entry point.
  2. It will create a bundle (the output file) in our project’s dist folder containing the content of the entry point and its dependencies.

Note:

  • By default, Webpack generates its bundle as a main.js file, which it will save in the distribution folder we created in step 5. However, we can change the default setting by creating a configuration file, which Webpack will use automatically.
  • NPX is Node’s package runner that will automatically find and execute webpack.

Our next step is to tell browsers to use the newly created bundle. Let’s do that below.

Step 12: Refer browsers to the newly created bundle

So, now that we have created a browser-compatible bundle file, we need to tell browsers to use it instead of the index.js source code file.

To do this, we go to our HTML file and substitute the reference to our JavaScript source code with Webpack’s distribution bundle.

For instance, instead of using "./index.js" in the <script> tag of our HTML file, we would use "../dist/main.js", as in the command below:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES Module - CodeSweetly</title>
  </head>
  <body id="body">
    <h1>Module Bundler Tutorial</h1>
    <button id="button">Click Me to Change Color!</button>

    <!-- Tell browsers where to find the bundle you created with Webpack -->
    <script src="../dist/main.js"></script>
  </body>
</html>

Let’s now see our app!

Step 13: Check our app in the browser

Finally, we open our HTML file in the browser to confirm that the browser can successfully read our app and its dependencies.

Note: Remember that we created our HTML file inside the ./src directory in step 6.

RELATED TAGS

javascript
webpack
html
communitycreator
RELATED COURSES

View all Courses

Keep Exploring