Up and Running with Webpack 4
What’s new in Webpack 4
So what has actually changed?
Webpack 4 is fast
A lot of work has been done under the hood in Webpack 4 and this has resulted in it being much faster. In some cases, build times have been reduced by up to 98%.
In an attempt to simplify Webpack config, a
mode option has been introduced. This value can be set to
development. In development mode Webpack does all the things you would expect; better tooling for debugging, useful error messaging and faster incremental builds. In production mode, the output bundle is minified and optimised for runtime performance. Development-only code is also omitted from the bundle to help reduce the overall size.
CommonsChunkPlugin has been deprecated
The plugin used for splitting the output bundle into multiple smaller bundles has been deprecated. Instead, this functionality is baked in and is configurable using the
As long as you have a loader which can handle the language the WebAssembly file is written in, you can now directly import WebAssembly files.
Zero Config Setup
One of the most exciting changes in Webpack 4 is that it can now be used without any setup. This is down to some new sensible defaults.
Now that we know what has changed, let’s look at how we could use Webpack in a new project. By default, it will look for
./src/index.js as the entry point. Webpack will then bundle it up and emit it to
./dist/main.js. So, if you have an
index.js in your
src folder, all you need to do after installing Webpack is run
webpack –mode development for development mode or
webpack –mode production for production mode.
Simple, right? Obviously, there is a lot more to Webpack. It is super configurable and you can make it do pretty much anything you want. If you want to learn more about how you can configure it, check out the official documentation. https://webpack.js.org/
Webpack 4 has been released and it has a lot of benefits over previous versions. You should upgrade if you can!