This , 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 donR;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.


Using webpack 4 now guarantees you up to a 98% decrease in build for your projects thanks to performance improvements. I tried it out myself on an existing webpack project that used webpack 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


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 31530ms

webpack 4865ms

Environment Support

In the release note, classified under big changes, webpack also announced that Node 4 will no longer be supported. This decision was made so as to take advantage of the modern ES6 syntax which results in a more cleaner and stable code.
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.

The Mode Property

This is one of the big changes for webpack. webpack 4 ships with a property called mode which allows you to easily set which environment you’re working on, development and production. Each option has it’s own advantages and usage.

Setting the mode to development allows you to on building by giving you the best development experience with features like:

  • Tooling for browser debugging.
  • Comments, detailed error messages and hints for development are enabled.
  • Fast and optimized incremental rebuilds.

While setting mode to production offers you the best option and defaults needed for deploying your project such as:

  • Optimizations to generate optimized bundles.
  • Module concatenating (Scope Hoisting).
  • Smaller output size.
  • Exclusion of development-only code.

webpack will always throw an error if the mode has not been set as seen in the screenshot below.

You can set your mode in the webpack.config.js file to either development or production.

module.exports = {
    mode: 'development'


module.exports = {
    mode: 'production'

The mode property also accepts none instead of development or production if you’d like to do away with the error thrown by wepback and disable everything.

Plugins and Optimizations

The CommonsChunkPlugin was removed in webpack 4 and has been replaced with a set of defaults and API called optimization.splitChunks and optimization.runtimeChunk. This means you now get to have shared chunks automatically generated for you. Some other plugins were also deprecated in version 4.

  • NoEmitOnErrorsPlugin was deprecated and is now optimization.noEmitOnErrors. It’s set to on by default in production mode
  • ModuleConcatenationPlugin was deprecated and is now optimization.concatenateModules. It’s set to on by default in production mode
  • NamedModulesPlugin was deprecated and is now optimization.namedModules. 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 available
  • json: JSON data, it’s available via require and import
  • webassembly/experimental: WebAssembly modules (currently experimental)

javascript/auto used to be the default module in webpack 3 but webpack 4 completely abstracted the JavaScript specificity from the code base to allow for this change so that can specify the kind of module they want.

Also, webpack will look for the .wasm, .mjs, .js and .json extensions in this order.


0CJS basically means a Zero Config app. It’s the idea that you need the minimum or zero config to get a JavaScript project up and running. That’s the premise the relatively new bundler, Parcel also runs on. You don’t a config file to get started on building your app.

With version 4, webpack now has a platform for zero config, this means there would be no need for a webpack.config.js file.

All you need to do is have a ./src/index.js file and whenever you run the webpack command in the terminal, webpack knows to use that file as an entry point for the application. This might come in handy for small projects.

Other Updates

  • Dead branches will now removed by webpack itself. This was done by Uglify before but webpack is responsible for removing dead code now.
  • import() now supports webpackInclude and webpackExclude as a magic comment. This allows filtering files when using a dynamic expression.
  • Using System.import() in your code now emits a gentle warning. import() is advised.
  • UglifyJs now caches and parallizes by default.
  • performance improvement for RemoveParentModulesPlugin.
  • script tags are no longer text/javascript and async as this are the default values (saves a few bytes)

    These are just some of the many features that are in webpack 4. There are still so many updates and improvement to look forward to such as:

  • HTML/CSS modules. This means you can use an HTML/CSS file as an entry point.
  • Persistent Caching.
  • Multi-threading and Multicore.
  • Move WebAssembly support from experimental to stable.

It’s exciting to see what happens in the future with webpack and the JavaScript community.

You can check out the full release log for webpack 4 here.

Source link
thanks you RSS link


Please enter your comment!
Please enter your name here