webpack4的升級(jí)教程網(wǎng)上實(shí)在有很多，我也是跟著教程進(jìn)行升級(jí)，但是我發(fā)現(xiàn)在我使用了creact-react-app腳手架構(gòu)建的項(xiàng)目中進(jìn)行升級(jí)，會(huì)有一些其它bug存在，這里做一個(gè)排查和解決的記錄。

開發(fā)環(huán)境配置

1. 將webpack升級(jí)到webpackV4

2. 把項(xiàng)目run起來

3. 此時(shí)會(huì)遇到第一個(gè)錯(cuò)誤

Plugin could not be registered at 'html-webpack-plugin-before-html-processing'. Hook was not found.
BREAKING CHANGE:
There need to exist a hook at 'this.hooks'. To create a compatiblity layer for this hook, hook into 'this._pluginCompat'.

需要做的事情是 升級(jí)相關(guān)依賴包

webpack-cli
webpack-dev-server
html-webpack-plugin
react-dev-utils
file-loader
url-loader

4. 過程中會(huì)遇到很多奇怪的報(bào)錯(cuò)

Module build failed: TypeError: Cannot read property 'context' of undefined

類似這種錯(cuò)誤，就是你要升級(jí)你的相關(guān)loader包了

DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
    at ModuleScopePlugin.apply

更新 react-dev-utils 和 extract-text-webpack-plugin

this.htmlWebpackPlugin.getHooks is not a function

將HtmlWebpackPlugin放置于InterpolateHtmlPlugin之前，并且傳遞給InterpolateHtmlPlugin，然后設(shè)置PUBLIC_URL

new HtmlWebpackPlugin({
    inject: true,
    template: paths.appHtml,
}),
new InterpolateHtmlPlugin(HtmlWebpackPlugin, {
    PUBLIC_URL: publicUrl,
}),

Object proxy configuration is superseded by src/setupProxy.js To check
if action is required, look for the proxy key in package.json and
follow this table:

更新版本后的packjson不支持Proxy為對(duì)象的寫法，改為字符串形式

missingDeps.some not a function

react-dev-utils要升級(jí)到6及以上的版本

this.htmlWebpackPlugin.getHooks is not a function

升級(jí) html-webpack-plugin 4.0.0.alpha-2

生成環(huán)境配置

1. 拋棄new webpack.optimize.UglifyJsPlugin，在production 模式下，webpack提供了splitChunks和minimize進(jìn)行壓縮

2. 升級(jí) webpack-manifest-plugin 到 ^2.0.0-rc.2

3. 替換extract-text-webpack-plugin 為 mini-css-extract-plugin

官網(wǎng)配置

至此我認(rèn)為關(guān)于creact-react-app腳手架的webpack4升級(jí)完成