React

creact-react-appに基づいてwebpack4をアップグレードする道



Road Upgrade Webpack4 Based Creact React App



オンラインには多くのwebpack4アップグレードチュートリアルがあり、チュートリアルに従ってアップグレードしましたが、creact-react-appスキャフォールディングを使用してアップグレードしたプロジェクトでは、他にもいくつかのバグがあり、トラブルシューティングと解像度の記録。

開発環境の構成

  1. webpackをwebpackV4にアップグレードします
  2. プロジェクトを実行します
  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'.

The thing that needs to be done is to upgrade the related dependencies.



webpack-cli webpack-dev-server html-webpack-plugin react-dev-utils file-loader url-loader
  1. その過程で多くの奇妙なエラーが発生します。
Module build failed: TypeError: Cannot read property 'context' of undefined

Similar to this error, you have to upgrade your related loader package.

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

Update react-dev-utils and extract-text-webpack-plugin



this.htmlWebpackPlugin.getHooks is not a function

Place the HtmlWebpackPlugin before the InterpolateHtmlPlugin and pass it to InterpolateHtmlPlugin, then set the 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のバージョンを更新した後、オブジェクトの書き込みメソッドとしてプロキシをサポートしていません。文字列形式に変更されました

missingDeps.some not a function

React-dev-utils to upgrade to version 6 and above



this.htmlWebpackPlugin.getHooks is not a function

Upgrade html-webpack-plugin 4.0.0.alpha-2

ビルド環境構成

1.新しいwebpack.optimize.UglifyJsPluginを破棄します。本番モードでは、webpackはsplitChunksと最小の圧縮を提供します。
2.webpack-manifest-pluginを^ 2.0.0-rc.2にアップグレードします
3.extract-text-webpack-pluginをmini-css-extract-pluginに置き換えます

公式ウェブサイト構成

この時点で、creact-react-appスキャフォールディングのwebpack4アップグレードは完了したと思います。