问题1
Plugin could not be registered at 'html-webpack-plugin-before-html-processing'. Hook was not found.
- 解决方案：升级webpack
https://medium.com/@hiiamyes/upgrade-a-react-project-from-webpack-3-to-webpack-4-7b53b715a38
- 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/html-webpack-plugin/issues/875
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
- 解决办法：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
<html>
</html>
