升级到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.
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

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
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
    原文作者:三木奈绪
    原文地址: https://segmentfault.com/a/1190000017175671
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞