Benefits Using Webpack 4 to Create Cross-Browser Compatible Apps

DZone 's Guide to

Benefits Using Webpack 4 to Create Cross-Browser Compatible Apps

Webpack is one of the most popular module bundlers for JavaScript-based applications right now. Read on to find out why that is.

· Web Dev Zone ·
Free Resource

On February 25, 2018, Webpack 4 was released. It’s interesting that they named it ‘Legato.’ Legato means to play the notes in a piece of music without any gaps. Webpack had proven, time and again, why it is an integral part of JavaScript development ecosystem. Heavyweights of JavaScript like React and Angular have already integrated Webpack in their frameworks, just like Babel. And if you are building cross-browser compatible web apps, it is one of the most important and useful tools in your garage.

So, What’s New?

Often criticized by the JavaScript community for being a ‘customization hell,’ Webpack has tried a new approach. With earlier versions, you had to work extremely hard to keep up with the learning curve. The new approach has less customization, so you can get your project up and running with a few basic settings.

Faster Build Times, Smaller Bundle Size, and Cross-Browser Compatibility

The best thing about Webpack is the extended support and ecosystem. Webpack is critical for faster build times to tweak the performance of website or web app. In order to do that, it, in turn, needs the support of UglifyJS and Babel. UglifyJS 2 offers support for minifying the ES6 syntax before Babel can transpile it into ES5, which Webpack supports. Babel ensures that there are no discrepancies due to version or syntax of JS. This is especially useful for web coders who want to build browser compatible web apps and are worried about incompatibility issues with ECMAScript 6. The Webpack, along with tools like UglifyJS, Babel, and browserlist, can be used to convert ES6 code to compatible JS code.

In addition to all that, a great deal of community-built plugins have been created for extending Webpack functionality. For example, you can use the Autoprefixer Polyfill plugin to parse your project’s CSS files and automatically add browser-specific prefixes to the code to make it more cross-browser compatible.

Browser compatibility with Webpack

Perfecting the Defaults

As I mentioned earlier, the biggest problem with Webpack is that you have to customize everything. When I say everything, I mean that in the most literal way possible. Good to see that Webpack 4 has improved a lot. It assumes ./src/ to be the point of entry and exits the output to ./dist. This is known #0CJS (Zero Configuration JavaScript). This will save your precious time enabling faster deployment.

Specialized Modes for Better Builds

Webpack now offers two brilliant modes which offer distinct skill sets empowered to provide us with user-specific bundles. Let’s explore more to see what the fuss is all about.


The mode inculcates within itself out of the box optimizations and features. Almost like an Internet pirate’s treasure box. Tree-shaking, minification, side-effect-free module pruning; all these helpful features make a good case for Webpack 4 being user-friendly. Tree shaking effectively reduces the bundle size, removing unused code. The feature is relief if you import JSON with ES module syntax.


For those who want superior speed with development ecosystem experience, Webpack added schemes that allow you to easily read the source codes to its already existant mapping. Path names in the bundle output and eval-source maps boost up the build times.


Significant cuts were made in order to make Webpack lighter:

  • The source code was upgraded to a higher ECMAScript version.

  • The CommonChunkPlugin was removed, making way for optimization.splitsChunks.

  • Other removed features include module.loaders, loaderContext.options, the Compilation.notCacheable flag, NoErrorsPlugin, Dependency.isEqualResource, and NewWatchingPlugin.

Farewell to CSS Prefix Cross-Browser Incompatibility

Autoprefixer is a state of the art CSS prefix handler. With this packed inside Webpack, you can forget what you know about CSS prefixes. It takes care of the prefixes by checking the compatibility of different browsers and their versions on caniuse. This amazing task is done with great speed. Apart from this, it even removes the outdated prefixes accounting for a whopping 10% (more or less) increase in speed.

If you want to have support for specific browsers then you can easily do it. Using browserlist you can leverage .browserlistrc and, by cross-referencing the list that you provide, all the specific CSS issues will be resolved. In this case, you needn’t use Autofixer.

Let’s Check Out the Competition

When we talk about competition, Webpack has its hands full. Parcel is the new kid on the block. With Parcel coming out, there's a lot of hype. I mean everybody's talking about it. For starters, it needs no configuration and it works! Everybody's so charmed by this up and comer as it also provides a smaller bundle size.

Parcel pushed Webpack to innovate and improve even further. Also, Parcel’s learning curve isn't as steep as Webpack's, which greatly added to its popularity. Parcel is good, but it lacks on some fronts. For instance, you can’t use CSS and Sass variables using import. This does pose some problems but there is a simple solution as by exporting CSS files from JavaScript you can make sure that it handles dependencies.

There are others too like Browserify and Rollup that lack build time optimizations like tree shaking, etc.


It is evident that Webpack isn’t going anywhere. We have yet to see what new features will be brought on by competition. Being backed by heavy hitters like React and Angular adds to Webpack having more support in the wonderful JavaScript community. 

Webpack's GitHub Repo

webpack ,javascript ,web dev ,cross-browser compatability ,module bundler

Published at DZone with permission of Robin Jangu . See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}