Using Webpack 4 to Create Browser Compatible Apps
Posted On: June 29, 2018
5 Min Read
Rejoice! Weekend is here. I know everybody wants to rush towards the doors and feel that freedom. But bear with me for a few minutes.
So, What’s new?
Faster Build Times, Smaller Bundle Size, and Cross Browser Compatibility
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 support of UglifyJS and BabelJS. UglifyJS2 offers support minifying the ES6 syntax before Babel can transpile it into the 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 of EcmaScript 6. The Webpack, along with tools like UglifyJS, BabelJS, and Browserlists, can be used to convert ES6 code to compatible JS code.
Introduction of sideEffects: false within json package, makes it easier to remove the unused code within the bundles. The support for import and export of any local WebAssembly module is also added.
In addition to all that, a great deal of community-build plugins are also there for extending Webpack functionality. For example, you can use 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.
Perfecting the defaults
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 codes. The feature is relief if you import JSON with ESModule syntax.
For those who want superior speed with development ecosystem experience. Webpack added to its already existing mapping schemes for easily reading the source codes. Path names in bundle output and eval-source maps boost up the build times.
Significant cuts were made in order to make Webpack lighter. Node.js is no longer supported as source code finds itself upgraded to higher ecmascript version. CommonChunksPlugin too was removed, making way for optimization.splitsChunks. Other removed features include module.loaders, loaderContext.options, Compilation.notCacheable flag, NoErrorsPlugin, Dependency.isEqualResource, and NewWatchingPlugin.
Farewell CSS prefix cross browser Incompatibility
Not only this the Autoprefixer is another state of the art CSS prefix handler. With this packed inside Webpack forget what you know about CSS prefixes. It takes care of the Prefixes by checking the compatibility for 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 hand full. Parcel is like a new kid on the block with suave. With Parcel coming out, there was such a hype. I mean everybody was talking about it. For starters it needed no configuration and it worked! Everybody was so charmed by this up and comer, it also provided with even smaller bundle size.
There are others too like Browserify and Rollup that lack build time optimizations like Tree shaking or lack in some other aspects.
Until next time!
Got Questions? Drop them on LambdaTest Community. Visit now