HtmlWebpackPlugin引发TypeError:无法读取未定义的属性“hash”更新到Webpack5后

plicqrtu  于 2024-01-08  发布在  Webpack
关注(0)|答案(2)|浏览(191)

我正在更新我们的Web应用程序中的库到最新版本,从而将Webpack推到Webpack5。当调整'webpack.tag.dev.js'的参数时,我在编译过程中不断遇到以下错误:

  1. ...../node_modules/webpack/lib/NormalModule.js:1306
  2. hash.update(this.buildInfo.hash);
  3. ^
  4. TypeError: Cannot read property 'hash' of undefined

字符串
以下是我目前为止的webpack.js.dev.js文件(我删除了注解,试图让它更短一点):

  1. 'use strict';
  2. const autoprefixer = require('autoprefixer');
  3. const path = require('path');
  4. const webpack = require('webpack');
  5. const HtmlWebpackPlugin = require('html-webpack-plugin');
  6. const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
  7. const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
  8. const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
  9. const eslintFormatter = require('react-dev-utils/eslintFormatter');
  10. const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
  11. const getClientEnvironment = require('./env');
  12. const paths = require('./paths');
  13. const publicPath = 'http://localhost:3000/';
  14. const publicUrl = 'http://localhost:3000/';
  15. const env = getClientEnvironment(publicUrl);
  16. const BundleTracker = require('webpack-bundle-tracker');
  17. // This is the development configuration.
  18. // It is focused on developer experience and fast rebuilds.
  19. // The production configuration is different and lives in a separate file.
  20. module.exports = {
  21. devtool: 'cheap-module-source-map',
  22. entry: [
  23. require.resolve('./polyfills'),
  24. require.resolve('webpack-dev-server/client') + '?http://localhost:3000',
  25. require.resolve('webpack/hot/dev-server'),
  26. paths.appIndexJs,
  27. ],
  28. output: {
  29. pathinfo: true,
  30. filename: 'static/js/bundle.js',
  31. chunkFilename: 'static/js/[name].chunk.js',
  32. publicPath: publicPath,
  33. devtoolModuleFilenameTemplate: info =>
  34. path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
  35. },
  36. resolve: {
  37. modules: ['node_modules', paths.appNodeModules].concat(
  38. process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
  39. ),
  40. extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
  41. alias: {
  42. 'react-native': 'react-native-web',
  43. },
  44. plugins: [
  45. new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
  46. new BundleTracker({path: paths.statsRoot, filename: 'webpack-stats.dev.json'}),
  47. ],
  48. fallback: {
  49. dgram: false,
  50. fs: false,
  51. net: false,
  52. tls: false,
  53. child_process: false
  54. }
  55. },
  56. module: {
  57. strictExportPresence: true,
  58. rules: [
  59. {
  60. test: /\.(js|jsx|mjs)$/,
  61. enforce: 'pre',
  62. use: [
  63. {
  64. options: {
  65. formatter: eslintFormatter,
  66. eslintPath: require.resolve('eslint'),
  67. },
  68. loader: require.resolve('eslint-loader'),
  69. },
  70. ],
  71. include: paths.appSrc,
  72. },
  73. {
  74. oneOf: [
  75. {
  76. test: /\.worker\.(js|jsx|mjs)$/,
  77. include: paths.appSrc,
  78. use: [
  79. require.resolve("worker-loader"),
  80. require.resolve("thread-loader"),
  81. {
  82. loader: require.resolve("babel-loader"),
  83. options: {
  84. babelrc: false,
  85. presets: [require.resolve("babel-preset-react-app")],
  86. cacheDirectory: true,
  87. highlightCode: true,
  88. },
  89. },
  90. ],
  91. },
  92. {
  93. test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
  94. loader: require.resolve('url-loader'),
  95. options: {
  96. limit: 10000,
  97. name: 'static/media/[name].[hash:8].[ext]',
  98. },
  99. },
  100. {
  101. test: /\.(js|jsx|mjs)$/,
  102. include: paths.appSrc,
  103. loader: require.resolve('babel-loader'),
  104. options: {
  105. cacheDirectory: true,
  106. },
  107. },
  108. {
  109. test: /\.(html)$/,
  110. use: {
  111. loader: 'html-loader',
  112. options: {
  113. minimize: true
  114. }
  115. }
  116. },
  117. {
  118. test: /\.css$/,
  119. use: [
  120. require.resolve('style-loader'),
  121. {
  122. loader: require.resolve('css-loader'),
  123. options: {
  124. importLoaders: 1,
  125. },
  126. },
  127. {
  128. loader: require.resolve('postcss-loader'),
  129. options: {
  130. ident: 'postcss',
  131. plugins: () => [
  132. require('postcss-flexbugs-fixes'),
  133. autoprefixer({
  134. browsers: [
  135. '>1%',
  136. 'last 4 versions',
  137. 'Firefox ESR',
  138. 'not ie < 9',
  139. ],
  140. flexbox: 'no-2009',
  141. }),
  142. ],
  143. },
  144. },
  145. ],
  146. },
  147. {
  148. exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
  149. loader: require.resolve('file-loader'),
  150. options: {
  151. name: 'static/media/[name].[hash:8].[ext]',
  152. },
  153. },
  154. ],
  155. },
  156. // ** STOP ** Are you adding a new loader?
  157. // Make sure to add the new loader(s) before the "file" loader.
  158. ],
  159. },
  160. plugins: [
  161. new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
  162. // Generates an `index.html` file with the <script> injected.
  163. new HtmlWebpackPlugin({
  164. // inject: true,
  165. template: paths.appHtml,
  166. hash: false,
  167. }),
  168. new webpack.DefinePlugin(env.stringified),
  169. new webpack.HotModuleReplacementPlugin(),
  170. new CaseSensitivePathsPlugin(),
  171. new WatchMissingNodeModulesPlugin(paths.appNodeModules),
  172. new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
  173. new BundleTracker({path: paths.statsRoot, filename: 'webpack-stats.dev.json'}),
  174. ],
  175. performance: {
  176. hints: false,
  177. },
  178. optimization: {
  179. moduleIds: 'named',
  180. }
  181. };


这里是我目前的相关库(或者至少是我认为相关的库,如果需要,我肯定会发布任何其他库)

  1. [email protected]
  2. [email protected]
  3. [email protected]


我认为导致问题的部分是插件,特别是HtmlWebpackPlugin:

  1. plugins: [
  2. *** I think the HtmlWebpackPlugin is causing the issue ***
  3. new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
  4. // Generates an `index.html` file with the <script> injected.
  5. new HtmlWebpackPlugin({
  6. // inject: true,
  7. template: paths.appHtml,
  8. hash: false,
  9. }),
  10. ...
  11. ],


有没有办法修复这个错误?我觉得我正确地调用了HtmlWebpackPlugin,但是我是不是很笨?

**更新1:**Inverting InterpolateHtmlPlugin和HtmlWebpackPlugin产生相同的错误
**更新2:**HtmlWebpackPlugin被确定为不是问题的原因,此时错误正在追溯到Webpack。
**更新3:**Git repo重新创建位于https://github.com/mexicantexan/webpack-error-reproduction的错误,并在以下链接中打开了一个问题:https://github.com/webpack/webpack/issues/14142
**更新4:**已解决。请查看下面的复选标记解决方案。

pgccezyw

pgccezyw1#

原来我们把BundleTracker放在了错误的地方。在配置文件中,我们把它从module.exports.resolve.plugins中删除了,应用程序就启动了。注意到它的alexander-akait!!

iyfamqjs

iyfamqjs2#

当我不小心将插件添加到resolve.plugins而不是plugins时,我看到了这个错误。

相关问题