如何解决无法在“ html-webpack-plugin-before-html-processing”处注册插件找不到挂钩
this is the error: Plugin could not be registered at 'html-webpack-plugin-before-html-processing'. Hook was not found.
BREAKING CHANGE: There need to exist a hook at 'this.hooks'. To create a compatibility layer for this hook,hook into 'this._pluginCompat'.
here is the code of package.json file of my react project
{
"name": "burger-project","version": "0.1.0","private": true,"dependencies": {
"autoprefixer": "7.1.6","axios": "^0.19.2","babel-core": "6.26.0","babel-eslint": "7.2.3","babel-jest": "^26.3.0","babel-loader": "7.1.2","babel-preset-react-app": "^3.1.2","babel-runtime": "6.26.0","case-sensitive-paths-webpack-plugin": "2.1.1","chalk": "1.1.3","dotenv": "4.0.0","dotenv-expand": "4.2.0","eslint": "4.10.0","eslint-config-react-app": "^2.1.0","eslint-loader": "1.9.0","eslint-plugin-flowtype": "2.39.1","eslint-plugin-import": "2.8.0","eslint-plugin-jsx-a11y": "5.1.1","eslint-plugin-react": "7.4.0","extract-text-webpack-plugin": "3.0.2","file-loader": "1.1.5","fs-extra": "3.0.1","html-webpack-plugin": "2.29.0","jest": "^26.4.2","object-assign": "4.1.1","postcss-flexbugs-fixes": "3.2.0","postcss-loader": "2.0.8","promise": "8.0.1","prop-types": "^15.7.2","raf": "3.4.0","react": "^16.8.0","react-dev-utils": "^5.0.2","react-dom": "^16.8.0","react-redux": "^7.2.1","react-router-dom": "^5.2.0","redux": "^4.0.5","redux-devtools-extension": "^2.13.8","redux-thunk": "^2.3.0","resolve": "1.6.0","style-loader": "0.19.0","sw-precache-webpack-plugin": "0.11.4","url-loader": "0.6.2","webpack-dev-server": "^2.7.1","webpack-manifest-plugin": "1.3.2","whatwg-fetch": "2.0.3"
},"scripts": {
"start": "node scripts/start.js","build": "node scripts/build.js","test": "node scripts/test.js --env=jsdom"
},"jest": {
"collectCoverageFrom": \[
"src/**/*.{js,jsx,mjs}"
\],"setupFiles": \[
"<rootDir>/config/polyfills.js"
\],"testMatch": \[
"<rootDir>/src/**/__tests__/**/*.{js,mjs}","<rootDir>/src/**/?(*.)(spec|test).{js,"testEnvironment": "node","testURL": "http://localhost","transform": {
"^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest","^.+\\.css$": "<rootDir>/config/jest/cssTransform.js","^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},"transformIgnorePatterns": \[
"\[/\\\\\]node_modules\[/\\\\\].+\\.(js|jsx|mjs)$"
\],"moduleNameMapper": {
"^react-native$": "react-native-web"
},"moduleFileExtensions": \[
"web.js","js","json","web.jsx","jsx","node","mjs"
\]
},"babel": {
"presets": \[
"react-app"
\]
},"eslintConfig": {
"extends": "react-app"
},"devDependencies": {
"babel-plugin-add-module-exports": "^1.0.2","css-loader": "^4.2.1","preload-webpack-plugin": "^3.0.0-beta.3","webpack": "^4.44.1"
}
}
插件无法在“ html-webpack-plugin-before-html-processing”处注册。找不到挂钩。 突破性变化：需要在“ this.hooks”处存在一个钩子。要为此钩子创建兼容层，请钩入“ this._pluginCompat”。
这是我的create-react-app中的webpack.config.dev.js文件：
//'use strict';
const autoprefixer = require('autoprefixer');
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
const eslintFormatter = require('react-dev-utils/eslintFormatter');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const getClientEnvironment = require('./env');
const paths = require('./paths');
// Webpack uses `publicPath` to determine where the app is being served from.
// In development,we always serve from the root. This makes config easier.
const publicPath = '/';
// `publicUrl` is just like `publicPath`,but we will provide it to our app
// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
// Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
const publicUrl = '';
// Get environment variables to inject into our app.
const env = getClientEnvironment(publicUrl);
// This is the development configuration.
// It is focused on developer experience and fast rebuilds.
// The production configuration is different and lives in a separate file.
module.exports = {
// You may want 'eval' instead if you prefer to see the compiled output in DevTools.
// See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
devtool: 'cheap-module-source-map',// These are the "entry points" to our application.
// This means they will be the "root" imports that are included in JS bundle.
// The first two entry points enable "hot" CSS and auto-refreshes for JS.
entry: [
// We ship a few polyfills by default:
require.resolve('./polyfills'),// Include an alternative client for WebpackDevServer. A client's job is to
// connect to WebpackDevServer by a socket and get notified about changes.
// When you save a file,the client will either apply hot updates (in case
// of CSS changes),or refresh the page (in case of JS changes). When you
// make a syntax error,this client will display a syntax error overlay.
// Note: instead of the default WebpackDevServer client,we use a custom one
// to bring better experience for Create React App users. You can replace
// the line below with these two lines if you prefer the stock client:
// require.resolve('webpack-dev-server/client') + '?/',// require.resolve('webpack/hot/dev-server'),require.resolve('react-dev-utils/webpackHotDevClient'),// Finally,this is your app's code:
paths.appIndexJs,// We include the app code last so that if there is a runtime error during
// initialization,it doesn't blow up the WebpackDevServer client,and
// changing JS code would still trigger a refresh.
],output: {
// Add /* filename */ comments to generated require()s in the output.
pathinfo: true,// This does not produce a real file. It's just the virtual path that is
// served by WebpackDevServer in development. This is the JS bundle
// containing code from all our entry points,and the Webpack runtime.
filename: 'static/js/bundle.js',// There are also additional JS chunk files if you use code splitting.
chunkFilename: 'static/js/[name].chunk.js',// This is the URL that app is served from. We use "/" in development.
publicPath: publicPath,// Point sourcemap entries to original disk location (format as URL on Windows)
devtoolModuleFilenameTemplate: info =>
path.resolve(info.absoluteResourcePath).replace(/\\/g,'/'),},resolve: {
// This allows you to set a fallback for where Webpack should look for modules.
// We placed these paths second because we want `node_modules` to "win"
// if there are any conflicts. This matches Node resolution mechanism.
// https://github.com/facebookincubator/create-react-app/issues/253
modules: ['node_modules',paths.appNodeModules].concat(
// It is guaranteed to exist because we tweak it in `env.js`
process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
),// These are the reasonable defaults supported by the Node ecosystem.
// We also include JSX as a common component filename extension to support
// some tools,although we do not recommend using it,see:
// https://github.com/facebookincubator/create-react-app/issues/290
// `web` extension prefixes have been added for better support
// for React Native Web.
extensions: ['.web.js','.mjs','.js','.json','.web.jsx','.jsx'],alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
'react-native': 'react-native-web',plugins: [
// Prevents users from importing files from outside of src/ (or node_modules/).
// This often causes confusion because we only process files within src/ with babel.
// To fix this,we prevent you from importing files out of src/ -- if you'd like to,// please link the files into your node_modules/ and let module-resolution kick in.
// Make sure your source files are compiled,as they will not be processed in any way.
new ModuleScopePlugin(paths.appSrc,[paths.appPackageJson]),],module: {
strictExportPresence: true,rules: [
// TODO: Disable require.ensure as it's not a standard language feature.
// We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
// { parser: { requireEnsure: false } },// First,run the linter.
// It's important to do this before Babel processes the JS.
{
test: /\.(js|jsx|mjs)$/,enforce: 'pre',use: [
{
options: {
formatter: eslintFormatter,eslintPath: require.resolve('eslint'),loader: require.resolve('eslint-loader'),include: paths.appSrc,{
// "oneOf" will traverse all following loaders until one will
// match the requirements. When no loader matches it will fall
// back to the "file" loader at the end of the loader list.
oneOf: [
// "url" loader works like "file" loader except that it embeds assets
// smaller than specified limit in bytes as data URLs to avoid requests.
// A missing `test` is equivalent to a match.
{
test: [/\.bmp$/,/\.gif$/,/\.jpe?g$/,/\.png$/],loader: require.resolve('url-loader'),options: {
limit: 10000,name: 'static/media/[name].[hash:8].[ext]',// Process JS with Babel.
{
test: /\.(js|jsx|mjs)$/,loader: require.resolve('babel-loader'),options: {
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader turns CSS into JS modules that inject <style> tags.
// In production,we use a plugin to extract that CSS to a file,but
// in development "style" loader enables hot editing of CSS.
{
test: /\.css$/,use: [
require.resolve('style-loader'),{
loader: require.resolve('css-loader'),options: {
importLoaders: 1,modules: true,localIdentName: '[name]__[local]__[hash:base64:5]'
},{
loader: require.resolve('postcss-loader'),options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',plugins: () => [
require('postcss-flexbugs-fixes'),autoprefixer({
browsers: [
'>1%','last 4 versions','Firefox ESR','not ie < 9',// React doesn't support IE8 anyway
],flexbox: 'no-2009',}),// "file" loader makes sure those assets get served by WebpackDevServer.
// When you `import` an asset,you get its (virtual) filename.
// In production,they would get copied to the `build` folder.
// This loader doesn't use a "test" so it will catch all modules
// that fall through the other loaders.
{
// Exclude `js` files to keep "css" loader working as it injects
// its runtime that would otherwise processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [/\.(js|jsx|mjs)$/,/\.html$/,/\.json$/],loader: require.resolve('file-loader'),options: {
name: 'static/media/[name].[hash:8].[ext]',// ** STOP ** Are you adding a new loader?
// Make sure to add the new loader(s) before the "file" loader.
],plugins: [
// Makes some environment variables available in index.html.
// The public URL is available as %PUBLIC_URL% in index.html,e.g.:
// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
// In development,this will be an empty string.
new InterpolateHtmlPlugin(env.raw),// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin({
inject: true,template: paths.appHtml,// Add module names to factory functions so they appear in browser profiler.
new webpack.NamedModulesPlugin(),// Makes some environment variables available to the JS code,for example:
// if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
new webpack.DefinePlugin(env.stringified),// This is necessary to emit hot updates (currently CSS only):
new webpack.HotModuleReplacementPlugin(),// Watcher doesn't work well if you mistype casing in a path so we use
// a plugin that prints an error when you attempt to do this.
// See https://github.com/facebookincubator/create-react-app/issues/240
new CaseSensitivePathsPlugin(),// If you require a missing module and then `npm install` it,you still have
// to restart the development server for Webpack to discover it. This plugin
// makes the discovery automatic so you don't have to restart.
// See https://github.com/facebookincubator/create-react-app/issues/186
new WatchMissingNodeModulesPlugin(paths.appNodeModules),// Moment.js is an extremely popular library that bundles large locale files
// by default due to how Webpack interprets its code. This is a practical
// solution that requires the user to opt into importing specific locales.
// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
// You can remove this if you don't use Moment.js:
new webpack.IgnorePlugin(/^\.\/locale$/,/moment$/),// Some libraries import Node modules but don't use them in the browser.
// Tell Webpack to provide empty mocks for them so importing them works.
node: {
dgram: 'empty',fs: 'empty',net: 'empty',tls: 'empty',child_process: 'empty',// Turn off performance hints during development because we don't do any
// splitting or minification in interest of speed. These warnings become
// cumbersome.
performance: {
hints: false,};
解决方法
在this post中，您似乎需要切换InterpolateHtmlPlugin（env.raw）和HtmlWebpackPlugin（）的顺序。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。