Using Webpack 4 — A “really” quick start (under 4 minutes)

Webpack 4 is here. For those who’ve used webpack 1, 2 or even 3 knows the pain. Webpack has been tremendously helpful in building modern web applications, but we all struggled at one common point — the webpack config. And that’s a major show stopper for webpack 4's release — a no config start!

Yes, you heard it right. You don’t need that webpack.config.js to begin using webpack, while still getting most common and helpful features right out of the box, including:

• Speed — Webpack 4, based on benchmarks by many reviewers, is said to be upto 98% faster
• Mode — Debugging? Production? Simply add a mode argument and you get development or production builds out of the box!
• Code-splitting
• WebAssembly support
• And many more upcoming in 4.x — 5.0, like with Module Types — you’d be able to use HTML or CSS as your entry point

But all that said, how quick is it really to get started? Let’s give it a spin, from scratch (I mean it).

Kickstarting

1. Create a directory

mkdir webpack4-demo && cd $_

2. Initialize yarn or npm . This would generate a package.json for you.

npm init
// OR
yarn init

3. Add the flashy new webpack 4.x as your devDependencies

yarn add webpack webpack-cli --dev

4. Add the build script in yourpackage.json

// package.json
"scripts: {
    "build": "webpack"
}

All’s setup. Save it. Now let’s run it.
Use your command line, enter below, and see what happens.

yarn build

Oh crap, it threw an error. Does it look something like below? Fret not.
> ERROR in Entry module not found: Error: Can’t resolve ‘./src’ in ‘webpack4-demo’

This is because webpack 4 is looking for an entry point in ./src as a default and we don’t have it. While you can change your entry point in webpack.config.js, for now let’s use the defaults.

Create src folder, make anindex.js in it.

// src/index.js
console.log('Hello World!');

and run build again

 yarn build

Voila. You can see the bundle generated in dist/main.js. And it’s also minified and everything I want.

Does that mean like the entry point, there’s no need for an output file?
You got that right. In webpack 4 if you don’t define any of them, it’ll use the defaults. And hence, it’s a 0 configuration (#0CJS).

But if you notice, you also see a warning in the terminal saying The ‘mode’ option has not been set. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for this environment. What does that mean?

Mode feature

Normally, we’d create 2 configurations (files) in a typical webpack project

• Development config— which might use webpack-dev-server (hot reloading), debugging enabled, etc
• Production config — which will spit out an optimized, minimized (uglify JS), sourcemapped bundle used in production environments

With the new mode feature, webpack 4 takes care of these by default by simply adding a mode argument in the command. You can use this to create 2 scripts in your package.json file.

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

Production mode enables all sorts of optimizations out of the box. Including minification, scope hoisting, tree-shaking and more. Development mode on the other hand is optimized for speed and does nothing more than providing an un-minified bundle.

That’s it! It doesn’t even take 4 minutes of code to be honest.

Added Sugar (ES6)

Do you use the all new awesome ES6 syntax? (I do). Let’s add that.

1. Install the dependencies

yarn add babel-core babel-loader babel-preset-env --dev

2. Create and configure a .babelrc

{
    "presets": [
        "env"
    ]
}

3. Tell webpack to use babel-loader to allow ES6 syntax. You can either add this as an argument in your package.json, like below:

"scripts": {
    "dev": "webpack --mode development --module-bind js=babel-loader",
    "build": "webpack --mode production --module-bind js=babel-loader"
}

OR, create a webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
}

Congratulations

You made it. And really quick. With all of webpack, ES6, and modes, up and running. Now that you’re set up, you can explore and add more things based on your project requirements.

Thank you for reading, I hope you enjoyed it. If you have any questions, suggestions or corrections, let me know in the comments below. Don’t forget to give this article a Share and some Claps 👏.