基于creact-react-app的webpack4升级之路

webpack4的升级教程网上实在有很多，我也是跟着教程进行升级，但是我发现在我使用了creact-react-app脚手架构建的项目中进行升级，会有一些其它bug存在，这里做一个排查和解决的记录。

开发环境配置

1. 将webpack升级到webpackV4

2. 把项目run起来

3. 此时会遇到第一个错误

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'.

需要做的事情是 升级相关依赖包

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

4. 过程中会遇到很多奇怪的报错

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

类似这种错误，就是你要升级你的相关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，然后设置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为对象的写法，改为字符串形式

missingDeps.some not a function

react-dev-utils要升级到6及以上的版本

this.htmlWebpackPlugin.getHooks is not a function

升级 html-webpack-plugin 4.0.0.alpha-2

生成环境配置

1. 抛弃new webpack.optimize.UglifyJsPlugin，在production 模式下，webpack提供了splitChunks和minimize进行压缩

2. 升级 webpack-manifest-plugin 到 ^2.0.0-rc.2

3. 替换extract-text-webpack-plugin 为 mini-css-extract-plugin

官网配置

至此我认为关于creact-react-app脚手架的webpack4升级完成