升级到webpack4.0遇到的一些问题

问题1

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

• 解决方案：升级webpack

https://medium.com/@hiiamyes/...

- npm i webpack@4.16.5
- npm i webpack-cli@3.1.0 
- npm i html-webpack-plugin@3.2.0

https://github.com/jantimon/h...

InterpolateHtmlPlugin放在HtmlWebpackPlugin之后

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

问题2

• CommonsChunkPlugin被弃置，使用splitChunks替代

webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.

• 解决办法
• https://webpack.docschina.org...

optimization: {
    splitChunks: {
      chunks: 'all',
    }
}

问题3

webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.

• 解决办法：移除webpack.optimize.UglifyJsPlugin改为：

plugins: [
    new UglifyJsPlugin({
+     sourceMap: true
    })
  ]

问题4

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

• 解决办法：

升级 react-dev-utils
升级 extract-text-webpack-plugin

npm i react-dev-utils@next
npm install extract-text-webpack-plugin@next

问题5

• 解决办法： https://github.com/facebook/c...

this.htmlWebpackPlugin.getHooks is not a function

npm install <plugin-name>@latest --save with all webpack plugins that you have
run npm i html-webpack-plugin@next --saveto get the beta version of html-webpack-plugin (this works with webpack 4)
Upgrade react-dev-utils and react if necessary
Make sure new InterpolateHtmlPlugin(... is AFTER new HtmlWebpackPlugin({... in the plugins section of webpack.config file.
Add the HtmlWebpackPlugin as parameter to InterpolateHtmlPlugin as stated by @kylealwyn and don't forget the publicUrl in case you're using it:

new InterpolateHtmlPlugin(HtmlWebpackPlugin, {
  PUBLIC_URL: publicUrl
}),

问题6

Module build failed
(from ./node_modules/eslint-loader/index.js):
TypeError: Cannot read property 'eslint' of undefined
Solution: The error is fixed in eslint-loader 2.0.0

• 解决办法：

$ npm rm eslint-loader && npm i eslint-loader
+ eslint-loader@2.1.0

问题7
Error: Requires Babel "^7.0.0-0", but was loaded with "6.25.0". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babel.

• 解决办法：

package.json 与package-lock.json中babel版本不一致，手动修改babel中的配置
yarn add --dev babel-jest babel-core@^7.0.0-bridge.0 @babel/core regenerator-runtime

问题8

Path variable [contenthash:8] not implemented in this context

• 解决办法：issue链接

should use ‘hash‘ not ‘’chunkhash‘。

问题9
css rlues修改

Can't find options with ident 'ref--8-2' 
{
    test: /\.less$/,
    use: ExtractTextPlugin.extract({
      fallback: 'style-loader',
      use: ['css-loader', 'less-loader']
    }),
  },

问题10

Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

解决办法：

npm install extract-text-webpack-plugin@next