Teach you to upgrade to Webpack4

Front-end projects are becoming increasingly complex, and building systems has become an integral part of the development process, and module bundler is the core of the front-end building system. As the most Popular front-end resource modular management and packaging tool of the moment, Webpack can package a number of loose modules in accordance with dependencies and rules into front-end resources for deployment in a production environment. You can also code-separate modules that are loaded on demand, and then load asynchronously when you actually need them.

4.0 has been released for a while, compared with a lot of performance improvement, 0 configuration, sound default settings. Let's take a look at it!
1, 0 configuration

The official no longer supports the following versions of NODE4 and installs the WEBPACK-CLI before using the Webpack >=4.0

Execute Webpack, will report a warning, an error.

Prior to 4.0, you need to provide a webpack.config.js configuration file with Webpack, and you need to specify the entry portal, and the output after the packaging of the file, and in the webpack4.0 above version, WEBPACK4 will default to try to. src to find the Index.js entry file, so create a new src/index.js under the project, and the same output will default to./dist/main.js.
2. Mode development and production environment

Before Webpack4, we configured the development and production environment to create two configuration files.
In development, it is common to configure plug-ins and dependent libraries for debugging such as Webpack-dev-server,
In production, it is common to configure dependent libraries such as uglifyjsplugin.
So with the warning from the front,
Modify the scripts in Package.json:

Execute NPM Run Build,
What is the main thing that this--mode production has done? There are mainly hoisting, tree-shaking, minification, scope and so on. The corresponding –mode development is mainly to optimize the speed of the compilation, output a file without compression.
New project We did not manually configure anything, Webpack4 all for us to solve.
3.Babel Configuration

Although ES6 long ago, but some browsers still do not fully support the new syntax and Api,babel can be ES6 into ES5, so that the old browser recognition.
Installs Babel dependent packages.

Webpack4 's 0 configuration simply lets you not define entry and output.
So if your project is bigger, just build a webpack.config.js file,
Babel configuration

Then create a new. babelrc file in the root directory, configured as follows.

Next Run the NPM run build and the browser supports ES6.

4, Goodbye commonchunk, hello optimization

Since the official removal of the Commonchunk plugin from WEBPACK4, the optimization attribute has been used for more flexible configuration, commonchunk configuration items are completely removed, Optimization.minimize is true, Instead of Webpack.optimize.UglifyJsPlugin. Runtimechunk can be configured as True,single or objects to automatically calculate some of the underlying chunk information that is currently being built.
CSS module uses mini-css-extract-plugin instead of Extract-text-webpack-plugin

Because Webpack4 release time is not often, most of the dependencies are recommended to upgrade to the latest version to prevent pit. These are my suggestions for Webpack4 upgrade, please correct me!

Teach you to upgrade to Webpack4