使用 webpack-dev-server 遇到 404 Not Found 的解决方案

在前端开发中，使用 webpack-dev-server 可以方便地进行开发调试。但有时候在启动 webpack-dev-server 后，会遇到 404 Not Found 的错误，导致无法访问页面。本文将介绍遇到此问题时的解决方案。

问题分析

当启动 webpack-dev-server 后，如果访问页面时出现 404 Not Found 的错误，一般是因为 webpack-dev-server 没有正确地处理浏览器请求。具体来说，可能有以下几种原因：

1. webpack-dev-server 配置错误：webpack-dev-server 的配置不正确，导致无法正确地处理浏览器请求。
2. 资源路径错误：webpack-dev-server 所提供的资源路径不正确，导致浏览器无法找到对应的资源。
3. webpack-dev-server 版本问题：webpack-dev-server 版本过低或过高，与其他依赖包不兼容，导致无法正确地处理浏览器请求。

针对以上问题，下面将分别介绍解决方案。

解决方案

1. webpack-dev-server 配置错误

如果 webpack-dev-server 的配置不正确，会导致无法正确地处理浏览器请求。在这种情况下，需要检查 webpack-dev-server 的配置文件，确保配置正确。

下面是一个 webpack-dev-server 的配置文件示例：

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 8080,
  },
};

其中，devServer 是 webpack-dev-server 的配置项，包括 contentBase、compress、port 等属性。其中，contentBase 表示 webpack-dev-server 所提供的资源路径，需要与 output.path 保持一致。

2. 资源路径错误

如果 webpack-dev-server 所提供的资源路径不正确，会导致浏览器无法找到对应的资源。在这种情况下，需要检查 webpack-dev-server 所提供的资源路径，确保路径正确。

下面是一个 webpack-dev-server 的配置文件示例：

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    publicPath: '/',
    compress: true,
    port: 8080,
  },
};

其中，publicPath 表示 webpack-dev-server 所提供的资源路径，需要与浏览器访问的路径保持一致。例如，如果浏览器访问的路径为 http://localhost:8080/app，那么 publicPath 应该设置为 '/app/'。

3. webpack-dev-server 版本问题

如果 webpack-dev-server 版本过低或过高，会与其他依赖包不兼容，导致无法正确地处理浏览器请求。在这种情况下，需要升级或降级 webpack-dev-server 的版本，确保与其他依赖包兼容。

下面是一个 webpack-dev-server 的版本依赖示例：

{
  "dependencies": {
    "webpack": "^5.0.0",
    "webpack-cli": "^4.0.0",
    "webpack-dev-server": "^3.11.0"
  }
}

其中，webpack-dev-server 的版本为 ^3.11.0，表示只能使用 3.x 版本的 webpack-dev-server，与其他依赖包兼容。

总结

在使用 webpack-dev-server 进行前端开发时，遇到 404 Not Found 的错误时，需要检查 webpack-dev-server 的配置文件，确保配置正确；检查 webpack-dev-server 所提供的资源路径，确保路径正确；升级或降级 webpack-dev-server 的版本，确保与其他依赖包兼容。通过以上方法，可以解决 webpack-dev-server 遇到 404 Not Found 的问题。

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