不再贅述為什么要升級(jí)webpack4，有興趣的小伙伴可以看一下 知乎：如何評(píng)價(jià)webpack4

下面擼起袖子開干：

克隆項(xiàng)目，新建分支

git checkout -b feature_webpack_upgrade

# 相當(dāng)于以下兩句的簡(jiǎn)寫

git branch feature_webpack_upgrade

git checkout feature_webpack_upgrade

升級(jí) webpack

yarn add webpack webpack-dev-server webpack-cli

運(yùn)行后報(bào)錯(cuò)：

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

報(bào)錯(cuò)信息表示插件 html-webpack-plugin-before-html-processing

有問題，然而 webpack

中并沒有這個(gè)插件，google之后發(fā)現(xiàn) github上

有對(duì)這個(gè)問題的討論，所以升級(jí)插件：

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

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

new HtmlWebpackPlugin({}),

new InterpolateHtmlPlugin(env.raw),

繼續(xù)運(yùn)行，報(bào)錯(cuò)

TypeError: Cannot read property 'eslint' of undefined

升級(jí) eslint

即可

yarn add eslint-loader

繼續(xù)運(yùn)行，報(bào)錯(cuò)：

missingDeps.some not a function

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

繼續(xù)運(yùn)行，報(bào)錯(cuò)：

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

干掉被移除的插件 UglifyJsPlugin

即可， webpack4

生產(chǎn)模式下原生支持代碼壓縮和分割

繼續(xù)運(yùn)行，報(bào)錯(cuò)：

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

mini-css-extract-plugin

很明顯， Entrypoint

由 mini-css-extract-plugin

提供了，查找之下發(fā)現(xiàn) Chunk.entrypoints

由 extract-text-webpack-plugin

提供，那么：

yarn remove extract-text-webpack-plugin

yarn add mini-css-extract-plugin

繼續(xù)運(yùn)行，報(bào)錯(cuò)：

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

升級(jí) webpack-manifest-plugin

即可。

運(yùn)行通過，提交代碼，PR。

所有問題都可以通過仔細(xì)閱讀 error trace

加上善用google搞定。

收工~

總結(jié)

以上是生活随笔為你收集整理的git 创建webpack项目_一次create-react-app创建项目升级webpack的流水账的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。