If you are interested in webpack4, please check out zhihu: How do you evaluate Webpack4

Let’s roll up our sleeves and do it:

Clone the project and create a branch

git checkout -b feature_webpack_upgrade  
# is shorthand for the following two sentences
git branch feature_webpack_upgrade  
git checkout feature_webpack_upgrade  
Copy the code

Upgrade webpack

yarn add webpack webpack-dev-server webpack-cli 
Copy the code

Error after running:

Plugin could not be registered at 'html-webpack-plugin-before-html-processing'. Hook was not found. 
Copy the code

There is a problem with html-webpack-plugin-before-html-processing. However, there is no problem with the htML-webpack-plugin-before-html-processing.

yarn add react-dev-utils html-webpack-plugin 
Copy the code

Modify the configuration file to swap the following two plug-in locations:

new HtmlWebpackPlugin({}), 

new InterpolateHtmlPlugin(env.raw), 
Copy the code

Continue running, error reported

TypeError: Cannot read property 'eslint' of undefined
Copy the code

Upgrade ESLint

yarn add eslint-loader 
Copy the code

Continue running with an error:

missingDeps.some not a function
Copy the code

MissingDeps. Some not a function

Yarn add [email protected]Copy the code

Continue running with an error:

Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead. 
Copy the code

The plugin UglifyJsPlugin has been removed from webpack4 production mode

Continue running with an error:

Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead 
mini-css-extract-plugin
Copy the code

Entrypoints are provided by the extract-text-webpack-plugin. The entrypoints are provided by the extract-text-webpack-plugin.

yarn remove extract-text-webpack-plugin
yarn add mini-css-extract-plugin
Copy the code

Continue running with an error:

Error: Chunk.initial was removed. Use canBeInitial/isOnlyInitial() 
Copy the code

Update the webpack-manifest-plugin.

Run pass, submit code, PR.

All problems can be solved by carefully reading error Trace and using Google.

Call it a day ~