不再贅述為什么要升級webpack4，有興趣的小伙伴可以看一下 知乎：如何評價webpack4

下面擼起袖子開干：

克隆項目，新建分支

git checkout -b feature_webpack_upgrade

# 相當于以下兩句的簡寫

git branch feature_webpack_upgrade

git checkout feature_webpack_upgrade

升級 webpack

yarn add webpack webpack-dev-server webpack-cli

運行后報錯：

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

報錯信息表示插件 html-webpack-plugin-before-html-processing

有問題，然而 webpack

中并沒有這個插件，google之后發現 github上

有對這個問題的討論，所以升級插件：

yarn add react-dev-utils html-webpack-plugin

修改配置文件，交換以下兩個插件位置 ：

new HtmlWebpackPlugin({}),

new InterpolateHtmlPlugin(env.raw),

繼續運行，報錯

TypeError: Cannot read property 'eslint' of undefined

升級 eslint

即可

yarn add eslint-loader

繼續運行，報錯：

missingDeps.some not a function

yarn add react-dev-utils@6.0.0-next.3e165448

繼續運行，報錯：

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

干掉被移除的插件 UglifyJsPlugin

即可， webpack4

生產模式下原生支持代碼壓縮和分割

繼續運行，報錯：

Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

mini-css-extract-plugin

很明顯， Entrypoint

由 mini-css-extract-plugin

提供了，查找之下發現 Chunk.entrypoints

由 extract-text-webpack-plugin

提供，那么：

yarn remove extract-text-webpack-plugin

yarn add mini-css-extract-plugin

繼續運行，報錯：

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

升級 webpack-manifest-plugin

即可。

運行通過，提交代碼，PR。

所有問題都可以通過仔細閱讀 error trace

加上善用google搞定。

收工~