Webpack 4 Tutorial
Tags: webpack, javascript
Published: 2018-03-30 03:34:39

---
title: "Webpack 4 Tutorial"
published: true
tags: webpack, javascript
canonical_url: https://www.techiediaries.com/webpack-tutorial/
---

Webpack 4 (Codenamed **Legato** ) is the latest version of Webpack that brings many new features to the most popular module bundler such as better performance and the easiness of use.

In biref these are the most important features of Webpack 4:

- performance improvements and faster build times (up to 98% faster)
- zero configuration for small apps
- better tree shaking for pure modules without side effects
- the introduction of development and production modes
- `<script async>` support
- deprecated `CommonsChunkPlugin` in favor of the `optimize.splitChunks` API
- by default you can import and export web assembly (Rust, C++, C etc.)
- the introduction of the _mode_ property which can take either development or production options and defaults to _production_

If you have used Webpack before then you may agree that configuration is one of the most frustrated aspects of Webpack.

In this tutorial you'll get introduced to Webpack 4 and see how you can use it to bundle the different pieces of your modern front end applications but without having to deal with complex configurations particularly for small projects and demos when you just want to get up and running with your small web application.

Webpack 4 provides a lot of defaults that can be seen as a sort of convention as configuration.

## Webpack 4 Doesn't Need a Configuration File by Default

The first thing that you had to create when using Webpack is the configuration file `webpack.config.js` which contains many configuration options. Most importantly the [Entry Points](https://webpack.js.org/concepts/entry-points/) and [Output Files](https://webpack.js.org/concepts/output/) which define the files to be bundled and the bundle(s) to be produced.

```
const config = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: '/dist'
  }  
};

module.exports = config;
```

With Webpack you don't need to add this configuration you only need to add a `src` folder with an `index.js` file then after bundling your files you should expect your bundle to be saved in `dist/main.js`.

`src/index.js` and `dist/main.js` are the default entry and output points used by Webpack 4.

Now let's create a small JavaScript app that demonstrates these new concepts

So let's first generate a new npm module.

Head over to your terminal then create a new folder and navigate inside of it

```
mkdir webpack4-demo
cd webpack4-demo
```

Now you need to add a `package.json` file using

```
npm init -y
```

Next you need to install Webpack 4 and the Webpack CLI using npm

```
npm i webpack webpack-cli --save-dev
```

Open `package.json` and add a build script to build your app

```
"scripts": {
      "build": "webpack"
    }
```

Next add a _src_ folder with the `index.js` file

```
mkdir src
touch index.js
```

Open `index.js` then add any JavaScript code

```
console.log("hello Webpack 4!"):
```

Finally run your build script using:

```
npm run build
```

You should have your bundled in `dist/main.js` so you can see that Webpack 4 is using default values without the need for a configuration file.

## Conclusion

Using Webpack 4 you can quickly get up and running with your small test applications without the hassle of a configuration file.