Webpack Crash Course

Published in

The Startup

3 min readMay 11, 2020

What is webpack?

Webpack is a build tool that allows us to take all of our assets and turn them into a production-ready bundle. All of our files are considered modules and we tell Webpack to load those modules when we configure our project.

Instead of this…

… have this. Simpler, right?

Besides that, it can do much more. Check the official tutorials below to get a better idea:

Getting Started: https://webpack.js.org/guides/getting-started/
Asset Management: https://webpack.js.org/guides/asset-management/

Installing webpack and webpack-cli

First of all, make sure you have npm installed. Then:

$ node -v (check if your version is the latest)
$ npm -v (check if your version is the latest)
$ npm init y (just keep the standard config)
$ npm i webpack --save-dev
$ npm i webpack-cli --save-dev
$ vi package.json (check devDependencies if webpack and webpack-cli are installed)

First testing

Let's install jquery, add a single line of JS, and run webpack to see how it'll bundle up.

$ npm i jquery --save
$ mkdir src
$ touch src/index.js

Open index.js, add, and save:

const $ = require("jquery");
$("#target").html("Hello World!");

Then let's focus on the dist folder:

$ mkdir dist
$ touch dist/index.html

Add in index.html:

<!DOCTYPE html>
<html>
   <head>
      <title>Getting Started with webpack</title>
   </head>
   <body>
      <h1 id="target"></h1>
      <script src="main.js"></script>
   </body>
</html>

Run webpack using one of the commands below:

$ webpack
$ ./node_modules/.bin/webpack
$ npx webpack

Check that a ./dist/main.js file has been saved. Fantastic!

Run the build with webpack.config.js

The file webpack.config.js is responsible for all configuration needed in a project using webpack.

$ touch webpack.config.js

Add in it:

const path = require("path");

module.exports = {
   entry: "./src/index.js",
   output: {
      filename: "main.js",
      path: path.resolve(__dirname, "dist")
   },
};

For testing, run:

$ npx webpack

Run npm build scripts

Sometimes it's better to create easier methods to run commands. Npm allows it swiftly. Open package.json and update the object scripts:

"scripts": {
  "watch": "webpack --watch --mode development",
  "build": "webpack --mode production"
}

The commands will be respectively:

$ npm run watch
$ npm run build

Webpack Loaders

Out of the box, webpack only understands JavaScript and JSON files. Loaders allow webpack to process other types of files and convert them into valid modules that can be consumed by your application and added to the dependency graph.

In this article, we're going to configure the following functionalities:

Babel
Pug
Sass to CSS
Minify JS (Later)
Vue JS (Later)
React JS (Later)
ES Lint (Later)

Babel Loader

The explanation below is based on this description: https://webpack.js.org/loaders/babel-loader/

Install:

$ npm install -D babel-loader @babel/core @babel/preset-env webpack

Update webpack.config.js:

module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modules)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

Add the lines in the file /src/index.js:

// Babel Input: ES2015 arrow function
[1, 2, 3].map((n) => n + 1);

var a = (x) => x*2;

Run webpack:

$ npm run build

Check /dist/main.js and the file will have an ES2015 compatible JavaScript:

eval("var $ = __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\");\n\n$(\"#target\").html(\"Hello World!\"); // Babel Input: ES2015 arrow function\n\n[1, 2, 3].map(function (n) {\n  return n + 1;\n});\n\nvar a = function a(x) {\n  return x * 2;\n};\n\n//# sourceURL=webpack:///./src/index.js?");

Pug Loader

Please read the section Webpack for further information: https://medium.com/@augustkohl/pug-crash-course-41edff9d3b97

Sass to CSS

Please read the section Webpack for further information: https://medium.com/@augustkohl/sass-to-css-crash-course-c07ae2c4daf0

React

Later: https://www.valentinog.com/blog/babel/