使用 webpack-dev-server 404 报错？-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，webpack-dev-server 是一个非常重要的工具，它可以提供实时编译和热更新功能，让我们在开发过程中更加高效。但有时候在使用 webpack-dev-server 时，我们会遇到 404 报错问题，该如何解决呢？

问题分析

在使用 webpack-dev-server 进行开发时，我们通常会在 webpack 配置文件中配置 devServer。其中，常用的配置项有 contentBase、publicPath、port 等。其中，contentBase 指定了静态资源的根目录，publicPath 指定了打包后资源的访问路径前缀，port 指定了开发服务器的监听端口。

当访问 web 应用时，如果请求的路径匹配不到任何的后端路由，那么请求就会被转发到开发服务器上。此时，开发服务器会根据请求的路径，在 contentBase 指定的目录下查找对应的静态资源，并返回给浏览器。如果开发服务器找不到对应的资源，那么就会返回一个 404 错误。

原因分析

webpack-dev-server 404 错误通常有以下几种原因：

路径不正确：开发者在访问 web 应用时，路径输入有误，无法正确地匹配到 devServer 上的资源。
contentBase 配置有误：开发者在配置 contentBase 时，指定的目录路径不正确或者目录下没有对应的资源。
publicPath 配置有误：开发者在配置 publicPath 时，指定的路径前缀不正确或者没有正确地映射到 webpack 配置文件中的 output.publicPath 属性。
开发服务器启动失败：由于端口冲突或其他原因，开发服务器启动失败，导致 404 报错。

解决方法

针对不同的 404 错误原因，我们可以采取不同的解决方法。

解决路径不正确的问题

首先，我们需要确保路径的正确性。因为 webpack-dev-server 会按照路径匹配规则去查找静态资源，如果路径不正确就会触发 404 报错。

针对路径不正确的问题，我们需要仔细检查请求路径是否正确，是否拼写错误等问题。此外，我们还可以通过在浏览器的开发者工具中查看 Network 面板的请求信息，来检查请求路径是否符合预期。

解决 contentBase 配置有误的问题

如果路径正确但是仍然触发了 404 报错，那么可能是 contentBase 配置有误导致的。

我们可以通过检查 contentBase 的路径是否正确，并确保在该目录下确实存在要访问的静态资源。可以在 webpack 配置文件中使用 path.join 方法来拼接绝对路径，防止出现路径错误。

例如：

const path = require('path');

module.exports = {
  // ...
  devServer: {
    contentBase: path.join(__dirname, './public'),
  },
  // ...
};

解决 publicPath 配置有误的问题

如果 contentBase 路径正确但是仍然触发了 404 报错，那么可能是 publicPath 配置有误导致的。

我们可以检查 publicPath 的前缀是否与 output.publicPath 属性一致，以确保访问路径的正确性。

例如：

module.exports = {
  // ...
  output: {
    publicPath: '/',
    // ...
  },
  devServer: {
    publicPath: '/',
    // ...
  },
  // ...
};

解决开发服务器启动失败的问题

如果以上方法都无法解决 404 报错问题，那么可能是开发服务器启动失败导致的。

我们可以尝试修改 port 端口号，或者使用 sudo 命令以管理员权限启动开发服务器来解决该问题。

例如：

sudo yarn start

总结

在使用 webpack-dev-server 进行开发时，我们可能会遇到 404 报错问题。该问题通常由路径不正确、contentBase 配置有误、publicPath 配置有误或者开发服务器启动失败等原因导致。我们可以针对不同原因采取不同的解决方法，以确保开发过程中的高效性和准确性。

完整示例代码如下：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
  },
  devServer: {
    contentBase: path.join(__dirname, './public'),
    publicPath: '/',
    port: 3000,
  },
  module: {
    rules: [
      // ...
    ],
  },
  // ...
};

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6595327beb4cecbf2d968749

使用 webpack-dev-server 404 报错？