我正在迁移node.js项目。我刚刚升级到Webpack 4，运行npm run dev后无法编译项目。它将引发以下错误：
Error: Plugin could not be registered at 'html-webpack-plugin-after-emit'. Hoo k was not found.
BREAKING CHANGE: There need to exist a hook at 'this.hooks'. To create a compa tibility layer for this hook, hook into 'this._pluginCompat'.
- Tapable.js:69 Compilation.plugin
[treetopmall]/[tapable]/lib/Tapable.js:69:9
- util.js:89 Compilation.deprecated [as plugin]
internal/util.js:89:15
- dev-server.js:40
C:/Users/duncan/projects/treetopmall/build/dev-server.js:40:15
- Hook.js:154 SyncHook.lazyCompileHook
[treetopmall]/[tapable]/lib/Hook.js:154:20
- Compiler.js:631 Compiler.newCompilation
[treetopmall]/[webpack]/lib/Compiler.js:631:26
- Compiler.js:667
[treetopmall]/[webpack]/lib/Compiler.js:667:29
- Hook.js:154 AsyncSeriesHook.lazyCompileHook
[treetopmall]/[tapable]/lib/Hook.js:154:20
- Compiler.js:662 Compiler.compile
[treetopmall]/[webpack]/lib/Compiler.js:662:28
- Compiler.js:328 Compiler.runAsChild
[treetopmall]/[webpack]/lib/Compiler.js:328:8
- child-compiler.js:110
[treetopmall]/[html-webpack-plugin]/lib/child-compiler.js:110:21
- new Promise
- child-compiler.js:109 HtmlWebpackChildCompiler.compileTemplates
[treetopmall]/[html-webpack-plugin]/lib/child-compiler.js:109:31
- cached-child-compiler.js:344 PersistentChildCompilerSingletonPlugin.compileE ntries
[treetopmall]/[html-webpack-plugin]/lib/cached-child-compiler.js:344:21
- cached-child-compiler.js:211
[treetopmall]/[html-webpack-plugin]/lib/cached-child-compiler.js:211:47
我的package.json文件：
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js",
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e"
},
"dependencies": {
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-proposal-decorators": "^7.8.3",
"@babel/plugin-proposal-export-namespace-from": "^7.8.3",
"@babel/plugin-proposal-function-sent": "^7.8.3",
"@babel/plugin-proposal-json-strings": "^7.8.3",
"@babel/plugin-proposal-numeric-separator": "^7.8.3",
"@babel/plugin-proposal-throw-expressions": "^7.8.3",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-syntax-import-meta": "^7.8.3",
"apexcharts": "^3.19.2",
"axios": "^0.19.2",
"body-parser": "^1.19.0",
"bootstrap-vue": "^2.14.0",
"install": "^0.13.0",
"moment": "^2.26.0",
"mysql": "^2.18.1",
"numeral": "^2.0.6",
"vue": "^2.6.11",
"vue-apexcharts": "^1.5.3",
"vue-awesome": "^4.0.2",
"vue-chat-scroll": "^1.4.0",
"vue-router": "^3.2.0",
"vue-star-rating": "^1.6.1"
},
"devDependencies": {
"@babel/core": "^7.9.6",
"@babel/plugin-transform-runtime": "^7.9.6",
"@babel/preset-env": "^7.9.6",
"autoprefixer": "^9.8.0",
"babel-loader": "^8.1.0",
"babel-plugin-istanbul": "^6.0.0",
"babel-register": "^6.26.0",
"chai": "^4.2.0",
"chalk": "^4.0.0",
"chromedriver": "^83.0.0",
"connect-history-api-fallback": "^1.6.0",
"copy-webpack-plugin": "^6.0.1",
"cross-env": "^7.0.2",
"cross-spawn": "^7.0.2",
"css-loader": "^3.5.3",
"cssnano": "^4.1.10",
"eventsource-polyfill": "^0.9.6",
"express": "^4.17.1",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^6.0.0",
"friendly-errors-webpack-plugin": "^1.7.0",
"html-webpack-plugin": "^4.3.0",
"http-proxy-middleware": "^1.0.4",
"inject-loader": "^4.0.1",
"karma": "^5.0.9",
"karma-coverage": "^2.0.2",
"karma-mocha": "^2.0.1",
"karma-phantomjs-launcher": "^1.0.4",
"karma-phantomjs-shim": "^1.5.0",
"karma-sinon-chai": "^2.0.2",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.32",
"karma-webpack": "^4.0.2",
"mocha": "^7.1.2",
"nightwatch": "^1.3.5",
"node-sass": "^4.14.1",
"opn": "^6.0.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"ora": "^4.0.4",
"phantomjs-prebuilt": "^2.1.16",
"rimraf": "^3.0.2",
"sass-loader": "^8.0.2",
"selenium-server": "^3.141.59",
"semver": "^7.3.2",
"shelljs": "^0.8.4",
"sinon": "^9.0.2",
"sinon-chai": "^3.5.0",
"sw-precache-webpack-plugin": "^1.0.0",
"uglify-es": "^3.3.10",
"url-loader": "^4.1.0",
"vue-loader": "^15.9.2",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.43.0",
"webpack-bundle-analyzer": "^3.8.0",
"webpack-dev-middleware": "^3.7.2",
"webpack-dev-server": "^3.11.0",
"webpack-hot-middleware": "^2.25.0",
"webpack-merge": "^4.2.2"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
如您所见，运行npm run dev会执行dev-server.js脚本，因此根据错误消息，我认为错误源自脚本的插件：
// force page reload when html-webpack-plugin template changes
compiler.plugin('compilation', function (compilation) {
compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
hotMiddleware.publish({ action: 'reload' })
cb()
})
})
我想知道是否不建议使用.plugin语法，而应该使用其他语法吗？我尝试了compiler.hooks.done.tap({' and still not does work, it returns a 'webpack is not defined错误。
任何帮助将不胜感激。谢谢！