webpack - HtmlWebpackPlugin 抛出 TypeError:更新到 Webpack5 后无法读取未定义的属性“哈希”
问题描述
我正在将我们 Web 应用程序中的库更新到最新版本,从而将 Webpack 升级到 Webpack5。在调整“webpack.config.dev.js”的参数时,我在编译过程中不断遇到以下错误:
...../node_modules/webpack/lib/NormalModule.js:1306
hash.update(this.buildInfo.hash);
^
TypeError: Cannot read property 'hash' of undefined
到目前为止,这是我的 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');
const publicPath = 'http://localhost:3000/';
const publicUrl = 'http://localhost:3000/';
const env = getClientEnvironment(publicUrl);
const BundleTracker = require('webpack-bundle-tracker');
// 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 = {
devtool: 'cheap-module-source-map',
entry: [
require.resolve('./polyfills'),
require.resolve('webpack-dev-server/client') + '?http://localhost:3000',
require.resolve('webpack/hot/dev-server'),
paths.appIndexJs,
],
output: {
pathinfo: true,
filename: 'static/js/bundle.js',
chunkFilename: 'static/js/[name].chunk.js',
publicPath: publicPath,
devtoolModuleFilenameTemplate: info =>
path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
},
resolve: {
modules: ['node_modules', paths.appNodeModules].concat(
process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
),
extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
alias: {
'react-native': 'react-native-web',
},
plugins: [
new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
new BundleTracker({path: paths.statsRoot, filename: 'webpack-stats.dev.json'}),
],
fallback: {
dgram: false,
fs: false,
net: false,
tls: false,
child_process: false
}
},
module: {
strictExportPresence: true,
rules: [
{
test: /\.(js|jsx|mjs)$/,
enforce: 'pre',
use: [
{
options: {
formatter: eslintFormatter,
eslintPath: require.resolve('eslint'),
},
loader: require.resolve('eslint-loader'),
},
],
include: paths.appSrc,
},
{
oneOf: [
{
test: /\.worker\.(js|jsx|mjs)$/,
include: paths.appSrc,
use: [
require.resolve("worker-loader"),
require.resolve("thread-loader"),
{
loader: require.resolve("babel-loader"),
options: {
babelrc: false,
presets: [require.resolve("babel-preset-react-app")],
cacheDirectory: true,
highlightCode: true,
},
},
],
},
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
},
},
{
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
cacheDirectory: true,
},
},
{
test: /\.(html)$/,
use: {
loader: 'html-loader',
options: {
minimize: true
}
}
},
{
test: /\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9',
],
flexbox: 'no-2009',
}),
],
},
},
],
},
{
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: [
new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin({
// inject: true,
template: paths.appHtml,
hash: false,
}),
new webpack.DefinePlugin(env.stringified),
new webpack.HotModuleReplacementPlugin(),
new CaseSensitivePathsPlugin(),
new WatchMissingNodeModulesPlugin(paths.appNodeModules),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
new BundleTracker({path: paths.statsRoot, filename: 'webpack-stats.dev.json'}),
],
performance: {
hints: false,
},
optimization: {
moduleIds: 'named',
}
};
这是我当前的相关库(或者至少是我认为相关的库,如果需要,我肯定会发布其他库)
html-webpack-plugin@5.3.2
webpack@5.51.1
react-dev-utils@11.0.4
我认为导致问题的部分是插件,特别是 HtmlWebpackPlugin:
plugins: [
*** I think the HtmlWebpackPlugin is causing the issue ***
new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin({
// inject: true,
template: paths.appHtml,
hash: false,
}),
...
],
关于如何修复错误的任何想法?我觉得我正确地调用了 HtmlWebpackPlugin,但我是笨蛋吗?
更新 1:反转 InterpolateHtmlPlugin 和 HtmlWebpackPlugin 产生相同的错误
更新 2: HtmlWebpackPlugin 被确定不是问题的原因,此时错误正在追溯到 Webpack。
更新 3: Git repo 重新创建错误位于:https ://github.com/mexicantexan/webpack-error-reproduction 并且已在以下链接中打开了一个问题:https ://github.com/webpack/webpack/问题/14142
更新 4:已解决。检查下面的选中标记的解决方案。
解决方案
原来我们把BundleTracker放在了错误的地方。在配置文件中,我们将其从 module.exports.resolve.plugins 中删除,应用程序立即启动。大喊亚历山大-akait注意到它!
推荐阅读
- android - 如何从颤动中的复选框选择中生成项目列表?
- php - 与哨兵一起使用时 Laravel 队列停止
- mysql - Spring Cloud 数据流未连接到 MySQL DB
- sql - 如何优化这个嵌套的 SQL SELECT 查询
- c# - DBcontext 在注册为 Scoped 时被共享
- linux - Android 内核 - 无法在内核点配置中激活 CONFIG_USB_ETH=y
- r - 计算每个用户的第一个日期和最后一个日期之间的差异时如何修复错误?
- git - 如何在 Azure DevOps 构建期间使用 PowerShell 脚本将构建工件推送到 Git 存储库?
- c - 为什么我不能运行 CLion 项目
- json - 如何解组这个 json 字符串