At the time of Lao Yuan’s writing this article, version V5 was still in its early stages and might still have problems. Also, as a major release, there are some breaking changes that may cause some configurations and plug-ins to not work. But that didn’t stop us from starting to experiment with the new features on Changelog. If you have any questions you can go over here and give feedback. In addition, there are many excellent articles about Webpack4 configuration and Compiler->Compilation->Chunk->Module->Template overall operation principle. The next day is late and there are many people, let’s do some work together.

A fierce operation such as tiger guide

  • Upgrade your Node to 8 (V5 upgrades Node.js from 6 to 8)
  • NPM install webpack @ next – save – dev
  • NPM install webpack cli – save — dev
  • Package. json add “dev”: “webpack –mode development”
  • Package. json add “prod”: “webpack –mode production”

Get started on Webpack V5

Create the SRC folder, then create index.js. Simply write console.log(“Hello Webpack5”)

1. Dist package file evaluation

#Trembling hands with excited hearts
npm run dev
Copy the code

There’s nothing inside of me… . Pawn 😳… Well, that’s the end of it. The ~

Three hours later… I am still undying to find this issue resolved. Let’s take a look at a comparison of V5 and V4 after a successful run

V5 packages main.js to dist

V4 packing process

No culture of I can only say, oh I go!! It’s half the size, and that startup function is a bunch of 💃

2. The nerve-wracking on-demand loading

Previously when we wanted to import(./async.js”).then(…) inside index.js If we don’t add anything. By default, V4 generates a bunch of 0.js,1.js,2.js… So we need to use import(/* webpackChunkName: “name” */ “module”) to solve the embarrassment. Today V5 can enable a newly named block ID algorithm in development mode that provides readable references to blocks (and file names). The module ID is determined by its path relative to the context. The block ID is determined by the contents of the block, so you no longer need to use Magic Comments.

// SRC folder index.js
import("./async.js").then((_) = >{
    console.log(_.data);
})
console.log("Hello Webpack5")
Copy the code
// SRC folder async.js
const data = "Asynchronous data 🍊";
export default data; 
Copy the code

After compiling again, src_async_js.js lies in dist 🌹. If you execute NPM run prod at this time, you will see a js file starting with a number in dist. For example, mine is 61.js, you may be very curious, this is what the heck ❓

3. ModuleIds & chunkIds have to be determined

First, let’s change the file above.

// SRC folder index.js
import("./async.js").then((_) = > {
    console.log(_.data);
})
import("./async2.js").then((_) = > {
    console.log(_.data2);
})
console.log("Hello Webpack5")
Copy the code
// SRC folder async2.js
import common from "./common.js"
console.log(common)
const data2 = "Asynchronous data 🍎";
export default data2;
Copy the code

In V4 async.js and async2.js are assigned to one chunkId at a time. Import (“./async.js”).then(() => {console.log(.data); }) This line causes async2 to change from 1 to 0, as shown below:

Using BeyondCompare we can also clearly see the change in main.

Some students said it was not easy to do, and I could use Magic Comments or some plug-ins to fix his moduleIds & chunkIds. Yes, you are right, but V5 does not need to introduce any external force. As mentioned above, when we encounter unfamiliar JS with numbers in Prod, we add a new algorithm to enhance long-term caching, and enable it in production mode with the following configuration. These algorithms assign very short (3 or 4 character) numeric ids to modules and blocks of data in a deterministic manner.

Module.exports = {optimization:{chunkIds: "deterministic ", moduleIds: Module. exports = {optimization:{chunkIds: "natural ", moduleIds: "size"}}Copy the code

If you find these new features annoying, you can still set Optimization: {chunkIds: ‘named’} and it’s compatible, which is nice.

4. Much criticized compilation speed

Webpack compile speed is a headache for many students, of course, we also have a lot of ways to optimize. Examples include HappyPack, cache-loader, exclusion of node_modules, multi-threaded compression and even distributed compilation. Webpack’s slow compilation may also be related to its loder mechanism, such as string->ast->string, which is slightly different from Parcel 📦. What changes have been made in V5? All you have to do is add the following to the configuration file:

module.exports = {
    cache: {
        type: "filesystem"}}Copy the code

Cache is already available in version V4, but the configuration site says it is experimental and that cache-loader is no longer required if persistent caching is used. The same is true for Babel cacheDirectory and so on. Lao Yuan is too busy to turn over all the pr and source code in detail, but the general operation of the next seems to have some effect 😙 if which god here have time to turn over the source code is also welcome to discuss 📖 in the comment area

5. MinSize&maxSize is a better way to say

In version V4, by default, only the size of javascript can be handled 😧

module.exports = {
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    chunks: "all".name: "commons".minChunks: 1.minSize: "Value".maxSize: "Value"
                }
            }
        }
    }
}
Copy the code

V5 version change, this change is too skin 🐒 Lao Yuan has tried it, the effect is pretty good.

module.exports = {
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    chunks: "all".name: "commons",}},// The minimum file size will not be packaged
            minSize: {
                javascript: 0.style: 0,},// After the maximum file is exceeded, continue splitting
            maxSize: {
                javascript: 1.// Writing small on purpose is more effective
                style: 3000,}}}}Copy the code

7. Compiler optimization

If you’ve read Webpack source code, you know the importance of Compiler. Webpack is full of hooks and events.

In the new version, compilers should be closed when they are finished, because they have hooks for those states when they enter or exit the idle state. Plug-ins can use these hooks to perform less important tasks (such as persistent caches that slowly store caches to disk). At the same time, the plug-in authors should anticipate that some users may forget to close the compiler, so do it as soon as possible when the compiler closes all remaining work. The callback will then notify you of complete completion. When you upgrade to V5, be sure to call compiler. close using the Node.js API when you’re done.

8. Node.js Polyfills is automatically removed

In the past, the Polyfills of most Node.js core modules were shipped with The Webpack 4 release to automatically apply any core modules once they were used by the front end, but some were unnecessary. The attempt in V5 is to automatically stop polyfilling these core modules and focus on the front-end compatible modules. When migrating to V5, it is best to use front-end compatible modules whenever possible and to add polyfills of core modules manually whenever possible. Webpack encourages you to submit as many comments as possible, as this change may or may not make it into the final V5 release. Now the micro front end has been widely used by many domestic teams. Lao Yuan personally thinks this change is more beneficial for the front-end to focus on the development of modules.

At the beginning of this article, we listed a diagram of the author’s presentation with changes to Webpack. You can see it all here. The new version changes will certainly cause problems with many plug-ins, but V5’s performance improvements are what we expect. Finally, I want to say that the world martial arts out of Shaolin, the world technology out of the foundation. Only by laying a solid foundation can we keep up with the rapid changes in the front end of the entertainment industry.

The welfare of front end people

Old Yuan has been working for 8 years. A few years ago, he was lucky to enter Baidu and Tencent. Later, he chose to start his own business between alibaba offer and starting his own business.

In the past three years, I have delivered nearly 200 live classes in Tencent class, and I have selected 50 of them. Now THEY are given to students who want to improve for free. Those who are interested can scan the code to get them for free, first come, first served >>

The author is Zhijia teacher

March 12, 2019