Webpack 4 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 and Output Files 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.