The preface

Webpack5 is about to be released, we plan to step on the pit before the release, before the alpha version has been concerned, the focus of this update in the long-term cache, tree Shakking and ES6 package piece, the specific update log can refer to the official.

Update log

Official Update Log

  • The node version was updated to V10.
  • Webpack5 outputs es6 code by default, and 4 is ES5 (you can set output.ecmaversion to es5 packaging, which is generated in ES2015 by default).
  • Webpack <= 4 has a polyfill with many core Node.js modules, and 5 removes them to focus on modules compatible with the front end.
  • Optimized the size of the packaged files
  • Long-term cache (enabled by default)
  • Custom JSON parser
  • Optimized Tree Shakking (can be analyzed for nested modules, unused will be removed in production mode)
  • SplitChunk and module size (can be more finely cut for JS and CSS styles, and used for minSize and maxSize)
  • The module name
  • The compiler is idle and closed (after using wepback() in Node, you need to manually call compiler.close(), which is the current WebPack instance).

Environment to prepare

  • Above node V10, official minimum 8.9.0, personal V13.1.0
  • Webpack 5.0.0 – beta. 7
  • Webpack – cli 3.13.0

The above is my personal environment, for reference only.

Refer to the article

  • Webpack 5 upgrade experiment

Began to hit the pit

Packaging contrast

Create a new webpack.config.js file with the following content

const path = require('path')

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
  }
}
// package.json
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"."dev": "webpack --mode development"."build": "webpack --mode production"
  },
Copy the code

Now let’s install html-Webpack-Plugin and Webpack-dev-server to make the configuration support hot updates and HTML

NPM I html-webpack-plugin webpack-dev-sever -d // package.json configuration is changed to"dev": "webpack-dev-server --mode development"
Copy the code

After the installation, the configuration changes to this

Then, the HTml-webpack-plugin gives us a surprise (error). Isn’t that exciting and surprising?

yarn add html-webpack-plugin@next -D
Copy the code

When the installation was complete, we restarted WebPack and found that the problem had been resolved and the project could continue to run. So far, it’s just a console and an HTML page with nothing. We can open webPack’s multithreading, package it, and install terser-Webpack-plugin. After installing, configure as follows

terser-webpack-plugin

issue

tree shakking

The result of webpack5

Webpack can now access the exported nested module. When the object is exported again, the tree shakking can be improved. The dependencies of modules are analyzed in advance, and then pre-processed, and then unused modules are directly deleted during compilation. I don’t know much about it. Webpack5 also turns on optimization. InnerGraph, which starts in production mode by default. This option analyzes the symbols of modules to find imports and import dependencies, a feature webpack4 does not have. The following can be analyzed:

  • function
  • class
  • Export default or variable declaration
  • A local variable
  • Class and function expressions

Now we add the following code

The persistent cache

Webpack5 has added persistent cache, which can be enabled using the following configuration:

The module name ID is determined

conclusion

Webpack 5 has changed in size and speed compared to WebPack 4. It is not clear whether webPack 4 will be faster than webPack 4. The code has been uploaded to Github, if you have any questions, you can also add me Q: 2495713984.

Address: Webpack5 address