如果你在使用 webpack-dev-server 进行前端开发时遇到了如题所示的报错，那么本文将为你提供解决方案。
问题分析
首先，我们需要了解这个报错的原因。它的意思是 fallback 失败了，也就是在使用 webpack-dev-middleware 时出了问题。具体来说，是在调用 getStats 方法时出现了 null 值，导致报错。
这个问题的出现可能有多种原因，比如 webpack-dev-middleware 的版本不兼容、缺少必要的配置等等。我们需要仔细分析具体的情况，才能找到解决方案。
解决方案
检查 webpack-dev-middleware 版本
首先，我们需要检查 webpack-dev-middleware 的版本是否正确。如果你正在使用 webpack 4 或以上的版本，那么你需要安装 webpack-dev-middleware 的最新版本，也就是 v5。如果你使用的是 webpack 3 或以下的版本，那么你需要安装 webpack-dev-middleware 的 v3 版本。
可以通过以下命令来安装 webpack-dev-middleware 的最新版本：
npm install webpack-dev-middleware@latest --save-dev
检查 webpack-dev-server 配置
如果你已经确认了 webpack-dev-middleware 的版本正确，那么你需要检查 webpack-dev-server 的配置是否正确。特别是在使用多个 entry points 时，你需要确保每个 entry point 都有正确的配置。
以下是一个正确的 webpack-dev-server 配置的示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
------ -
---- -----------------
------- --------- ------------
--
------- -
--------- ------------
----- ----------------------- -------
--
-------- -
--- -------------------------------------
----- --------
--
--
---------- -
------------ -------------------- --------
--------- -----
----- ----
-
--检查 webpack 配置
如果你已经确认了 webpack-dev-server 的配置正确，那么你需要检查 webpack 的配置是否正确。特别是在使用 webpack-dev-middleware 时，你需要确保 webpack 的配置正确。
以下是一个正确的 webpack 配置的示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - -
------ -
---- ----------------
--
------- -
--------- ------------
----- ----------------------- -------
--
-------- -
--- -------------------
--------- ------------------
--
-
--检查 package.json 文件
如果你已经确认了 webpack 和 webpack-dev-server 的配置正确，那么你需要检查 package.json 文件是否正确。特别是在使用 webpack-dev-server 时，你需要确保正确的依赖已经安装。
以下是一个正确的 package.json 文件的示例：
-- -------------------- ---- -------
-
------- ---------
---------- --------
-------------- ---
------- -----------
---------- -
-------- ------------------- --------
-------- ---------
--
--------------- -
-------- ----------
------------ ---------
--
------------------ -
---------------------- ---------
---------- ----------
-------------- ---------
--------------------- --------
-
-升级 webpack 和 webpack-dev-server
最后，如果你已经检查了以上所有内容，但仍然遇到了问题，那么你可以尝试升级 webpack 和 webpack-dev-server 的版本。特别是在使用 webpack 3 或以下的版本时，你需要升级到最新的版本。
以下是升级 webpack 和 webpack-dev-server 的命令：
npm install webpack@latest --save-dev npm install webpack-dev-server@latest --save-dev
总结
以上就是解决 webpack-dev-server 报错：“Fallback failed: webpack-dev-middleware\nCannot read property 'getStats' of null” 的方法。如果你遇到了这个问题，可以按照以上步骤进行排查。同时，也建议你在平时的开发中，认真检查每一个配置项，避免出现类似的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65137aa595b1f8cacdbd83b0