webpack3升级到webpack4问题汇总

说明：项目是使用creact-react-app脚手架起的，记录一下升级过程中碰到问题

问题1

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

解决方案：
升级webpack webpack-cli html-webpack-plugin

yarn add webpack@4.16.5
yarn add webpack-cli@3.1.0
yarn add html-webpack-plugin@3.2.0

InterpolateHtmlPlugin放在HtmlWebpackPlugin之后:

module.exports = {
  //...
  plugins: [
    new HtmlWebpackPlugin({
      // ...
    }),
    new InterpolateHtmlPlugin(env.raw),
    //..
  ]
}

问题二：

Failed to compile.

./src/index.js
Module build failed (from ./node_modules/eslint-loader/index.js):
TypeError: Cannot read property 'eslint' of undefined

解决方案：
升级 eslint eslint-loader

yarn add eslint
yarn add eslint-loader

问题三：

TypeError: missingDeps.some is not a function

解决方案：

yarn add react-dev-utils@next

问题四：

Failed to compile.

webpack is not a function

解决方案：
修改scripts里的start.js：

const compiler = createCompiler(webpack, config, appName, urls, useYarn);

to:

const compiler = createCompiler({webpack, config, appName, urls, useYarn});

https://stackoverflow.com/questions/55140033/failed-to-compile-webpack-is-not-a-function

问题五：

this.htmlWebpackPlugin.getHooks is not a function

解决方案：
升级插件html-webpack-plugin

yarn add html-webpack-plugin@next

同时修改文件webpack.config.dev.js 和 webpack.config.prod.js：

new InterpolateHtmlPlugin(env.raw),

to:

new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw)