Sharing Top Content from the Angular-sphere.

What’s New in webpack 4 ― Scotch

  • , webpack can be simply described as a static module bundler for modern JavaScript applications.
  • It’s important to note that projects using the older versions of webpack might have reduced performance as modern JavaScript syntax is now in use.
  • webpack 4 ships with a property called mode which allows you to easily set which environment you’re working on, development and production.
  • It’s set to on by default in production mode – – In a bid to improve performance and get the best optimizes, UglifyJs now caches and parallizes by default in webpack 4.
  • New Module Types – webpack now supports these module types: – – – javascript/auto: (The default one in webpack 3) Javascript module with all module systems enabled: CommonJS, AMD, ESM – javascript/esm: EcmaScript modules, all other module system are not available – javascript/dynamic: Only CommonJS and, EcmaScript modules are not…

This week, the JavaScript community was blessed with the news of a new and shiny webpack, webpack 4. This version offers robust features and improvement that will definitely make your development flow a lot easier.

In case you don’t know what webpack is and what it’s all about (where have you been?), webpack can be simply described as a static module bundler for modern JavaScript applications. It helps to bundle all of the different modules and it packages them into one bundle or more bundles.

With that being said, let’s explore some of the new features and improvements in webpack 4.

Speed

Using webpack 4 now guarantees you up to a 98% decrease in build time for your projects thanks to performance improvements. I tried it out myself on an existing webpack project that used webpack 3 and result saw a 2x decrease in build time. This is also something you can check out.

To get started with webpack 4, install in your project using yarn or npm.

npm i webpack webpack-cli –save-dev

or

yarn add webpack webpack-cli –dev

That’s all you need to start using the latest version. You can see screenshots of the build time for both webpack 3 4 projects.

webpack 3 – 1530ms

What’s New in webpack 4 ― Scotch