Basics

To start this exercise, be sure to be in ./packages/novice/basic folder. Be sure you have installed this repository first

Introduction

This first example is here to help you why webpack exists and its basic usage.

In this app, we define two CommonJS modules (commonly used in a NodeJS env). They are both loaded in index.html.

If you're not familiar enough with the browser env, it won't be able to load CommonJS bundle. A browser can't handle NodeJS-like dependencies.

Here is the dependency graph of those modules:

title.js
      <- color.js
             <- node_modules/lodash

Old way

If we were few years ago, we would have to load all those files in the browser without the require syntax and by keeping the dependency order. For lodash library we would have used a cdn to load it.

This way works perfectly... But for a long time project, it would generate a lot of <script/> loading. Keeping the order would have been humanly difficult.

webpack solution

webpack is a NodeJS package that generate a bundle based on module dependencies graph resolution. It's very popular in the web community to generate web bundles for web applications.

Step 1: Setup simple configuration

To configure webpack, you just have to create a CommonJS module with default name webpack.config.js at the root of your project. Coupled with webpack-cli dev dependency, you can easily trigger a webpack build on this small app. This is where all the webpack configuration will be defined

const path = require("path");

module.exports = {
  entry: "./src/title.js", // The source module of our dependency graph
  output: {
    // Configuration of what we tell webpack to generate (here, a ./dist/main.js file)
    filename: "main.js",
    path: path.resolve(__dirname, "dist")
  }
};

After launching the command yarn webpack, a new file called main.js in a dist directory should be generated.

Step 2: Change index.html script target

For now, index.html doesn't reference the packaged file, so we must update it to use directly our webpack output. To do so, just change the <script/> tag in your index.html to reference the file generated by webpack.










 



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Simple JS file</title>
    <meta name="description" content="Simple JS file" />
  </head>
  <body>
    <h1>This title will change !</h1>
    <script src="dist/main.js"></script>
  </body>
</html>

Step 3: Script the build with webpack-cli

As you can figure out, we will trigger the build a lot! A good practice is to add a new build script in package.json .













 
 
 


{
  "name": "@novice/basic",
  "version": "1.0.0",
  "license": "MIT",
  "private": true,
  "dependencies": {
    "lodash": "^4.17.11"
  },
  "devDependencies": {
    "webpack": "^4.28.4",
    "webpack-cli": "^3.2.1"
  },
  "scripts": {
    "build": "webpack"
  }
}

Now launch the build and open your index.html in your browser:

yarn build

Look at the generated bundle