Geekly Articles each Day
📜 ⬆️ ⬇️

Webpack 4 Legato released

We are pleased to announce that webpack 4 (Legato) has become available today.
It can be downloaded via npm or yarn by doing:


$> yarn add webpack webpack-cli --dev

or


 $> npm i webpack webpack-cli --save-dev

Why legato?


We wanted to start a tradition of giving major releases code names. We decided to give the privilege to choose a name for the project to our largest sponsor on OpenCollective - trivago .


We addressed them, and this is what they said:


The names of our projects are usually associated with music. For example, our old
The JavaScript framework was called Harmony, and the new one is called Melody.
On the PHP side, we use Symphony with an extra layer that
called Orchestra.

Legato means playing notes one after another without pauses between them.

Webpack packs "all frontend without pauses / breaks" (JS, CSS, etc.). Therefore, we believe that
"legato" is a good name for a webpack.

Patrick Gotthardt from trivago Engineering.


We were delighted, because everything we were working on for this release, just carried the idea of ​​getting rid of the gaps, and in order to work with the webpack it was possible to “legato”. Many thanks to trivago for the incredible year of sponsorship and the name for webpack 4!


What's new?


There are so many new innovations in webpack 4 that a post with their full listing would be just awesome. Therefore, I will mention only a few of them, and the complete list can be found in the changelog on Github .


webpack 4 FAST (up to 98% faster)


From the community of our beta testers, we received interesting reports on the performance of the builds in the new version, so I did a survey to check the available data:


image


( Who wants to get into our webpack post? Need to do the following (if possible): Update your project to webpack v4 and tell us about the build time and bundle size before and after updating with the answer to this tweet )


The results came out amazing. Build time decreased from 60 to 98%! Here are just some of the answers that we received ( one , two ).


Thanks to these reviews, we were able to detect and fix several important bugs in the loaders and plugins. PS: We have not yet implemented multithreading and file cache (this is planned for version 5), so in subsequent releases it will be possible to further improve performance.


Increasing assembly speed was one of our most important tasks in this release. It would be possible to add as many other features as you like, but if they are impregnable, work slowly and spend time of developers, then what is the point? We are waiting for your feedback with performance measurements under the hashtags #webpack and # webpack4.


# 0CJS modes and default settings


We have introduced a new configuration property called mode . There are two modes: development and production , production is selected by default. Mode is a way to select appropriate default settings, optimized either by build size (production) or build build time (development).


To learn more about the modes, see our previous article .


Default values ​​appear at entry and output . So, now you don’t need to configure anything at all to get started . Using modes, your configuration files will be incredibly small, since most of the webpack routine work now takes on its shoulders.


Legato means playing notes one after another without pauses between them.


In total, we have a platform that does not require configuration, and we want you to expand it. One of the most valuable features of the webpack is its extensibility. Who are we to decide what your # 0CJS solution (zero-config JS) will look like? When we add to the webpack the ability to create presets of configs, you can expand # 0CJS as required by the workflow for you personally, or in your company, or even in the community of your framework.


Goodbye, CommonsChunkPlugin!


We get rid of CommonsChunkPlugin by adding instead a number of default settings and an easily redefined API called optimize.splitChunks . Now out of the box will work general chunks, automatically generated in various scenarios.



This post describes in more detail why we redid it and what the API looks like.


WebAssembly support


Now, by default, webpack supports import and export any local WebAssembly module. This means that you can now write loaders that allow you to import code into Rust, C ++, C, and other languages ​​compiled into WebAssembly.


Module types and .mjs support


Historically, only JavaScript modules were supported in the webpack. This gave users a lot of inconvenience when it was not possible to make bundles from HTML / CCS and others. In our new code base, we completely abstract away from JavaScript by entering the types of modules. At the moment there are 5 of them:



The most exciting thing about this innovation is that we can later make module types for CSS and HTML (scheduled for webpack 4.x and 5). It will be possible to make HTML entry point!


If you use HtmlWebpackPlugin


To this release, we gave the ecosystem a month to convert the bootloaders and plugins to use the new webpack 4 API. However, since Jan Nicklas was busy with urgent matters, we ourselves forked and patched the html-webpack-plugin . Now you can install it like this:


 $> yarn add html-webpack-plugin@webpack-contrib/html-webpack-plugin

When Jan returns at the end of the month, we plan to jantimon/html-webpack-plugin our fork into the jantimon/html-webpack-plugin . Until then, if you have problems with the work of the plugin, you can report them here .


If you have other plugins or loaders, you can read our migration guide .


But that's not all!


We have added so many features that we strongly recommend that you familiarize yourself with them in our official changer .


Where is the documentation for version 4?


Soon we will complete the migration guide and documentation for version 4. To track progress or help us, look in our documentation repository and do git checkout next .


What about \ <framework> -cli?


For the past 30 days, we have worked closely with all the frameworks to make sure that they are ready to support webpack 4 in their CLI and so on. Even popular libraries such as lodash-es or RxJS support the sideEffects flag, so you can immediately reduce the size of your bundle using their latest versions.


The AngularCLI team reports that they plan to release the next major version (about a week later) using webpack 4! If you want to find out how things are going with them, write to them and ask how you can help (instead of “when will it be ready?”) .


What's next?


We have already started planning our next feature set for webpack 4.x and 5! It will include (among other things):



Thank. Again.


To all our contributors, the main team, the authors of the downloaders and plug-ins, those whose first commits to open source software started with our project, who helped with troubleshooting the code: we are very grateful to you. This product is for you, and it was formed thanks to your own efforts.


image


We believe that the year 2018 carries with it the transition of JavaScript from the weary, ossified Middle Ages into a wonderful, bright Renaissance!


We have repeated this many times before, but the community is what makes the webpack so powerful, supported and impressive in today's era of the renaissance of JavaScript in which we live and work. Without you, webpack would be just another build tool.



There is no time to help our project, but you want to repay the open-source community to the community somehow? [Become our backer or sponsor on OpenCollective ( https://opencollective.com/webpack ). OpenCollective supports not only our core team, but also other project participants who devote a significant portion of their free time to improving our organization.


')

Source: https://habr.com/ru/post/350224/

More articles:


All Articles