Monday, 5 March, 2018 UTC

What's New in webpack 4

What's New in webpack 4

Summary

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
webpack 4 - 865ms
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 focus 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'
}
or
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 users can specify the kind of module they want.
Also, webpack will look for the .wasm, .mjs, .js and .json extensions in this order.
0CJS
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.

... more @ scotch.io

scotch.io