creact-react-appベースのwebpack 4アップグレードの道

2165 ワード
Webpack 4のアップグレードチュートリアルはネット上には本当にたくさんあります.私もチュートリアルに従ってアップグレードしていますが、creact-react-app足場を使って構築したプロジェクトでアップグレードすると、他のバグが存在することに気づきました.ここでは、調査と解決の記録をします.
開発環境の構成
  • webpackをwebpackV 4
    • にアップグレード
  • プロジェクトrunを
  • 最初のエラー
    • が発生します.
    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
  • の過程で多くの奇妙な誤報に遭遇する
    • 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足場のwebpack 4アップグレードが完了したと思います
    Meteor入門チュートリアル(1)-アプリケーションの作成
    python小プロジェクトの飛行機大戦