webpack-dev-server v4 2022 中的配置错误

Question

我正在研究如何对 2020 年在线课程做出反应，其中讲师使用 webpack 将图像和 CSS 包含在 javascript 中。 但是，webpack 似乎从 2020 年到 2022 年进行了更新。根据 官方网站从 v3 到 v4。

似乎其他人遇到了同样的问题并提出了同样的问题，我尝试过使用他们使用的解决方案，但我没有任何成功或进展。

我的目标是能够正确配置 webpack.config.js 文件，使用 webpack-dev-server 负责在我们使用 babel 和 webpack 对 JS 进行任何更改时自动重新加载浏览器。

我的 webpack.config.js 文件的配置最初与课程如下：

const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, 'src', 'index.js'),
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'public'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        }
      }
    ]
  },
};

使用此命令初始化 webpack-dev-server

npx webpack-dev-server --mode development

我有以下回报：

[webpack-cli] 无效的选项 object。 已使用与 API 架构不匹配的选项 object 初始化开发服务器。 - 选项具有未知属性“contentBase”。 这些属性有效：object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveSettml? ?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }

这表明contentBase:在 webpack-dev-server 版本 4 中不再使用

根据 官方网站， contentBase:似乎已更改为：

static: {
  directory: path.resolve(__dirname, 'public'),
},

改变：

const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, 'src', 'index.js'),
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'bundle.js'
  },
  devServer: {
    static: {
      directory: path.resolve(__dirname, 'public'),
    },
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        }
      }
    ]
  },
};

尝试了此修改，但无法通过终端中的命令启动 webpack-dev-server

npx webpack-dev-server --mode development

但是，现在我有另一个错误：

> <i> [webpack-dev-server] Project is running at: <i>
> [webpack-dev-server] Loopback: http://localhost:8080/ <i>
> [webpack-dev-server] On Your Network (IPv4): http://192.168.0.10:8080/
> <i> [webpack-dev-server] On Your Network (IPv6):
> http://[fe80::12bf:f2cb:19c:a79c]:8080/ <i> [webpack-dev-server]
> Content not from webpack is served from
> '/home/hebert/Documents/Bootcamp RocketSeat/frontend/public' directory
> node:internal/errors:477
>     ErrorCaptureStackTrace(err);

我的 package.json 看起来像这样：

{
  "name": "frontend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/cli": "^7.18.10",
    "@babel/core": "^7.19.1",
    "@babel/preset-env": "^7.19.1",
    "@babel/preset-react": "^7.18.6",
    "babel-loader": "^8.2.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0"
  },
  "devDependencies": {
    "webpack-dev-server": "^4.11.0"
  }
}

您能帮我正确配置 webpack 吗？ 提前感谢那些读到这里的人。

Answer 1

您对 static 的看法是对的，但是您忘记了其他重要设置。 我不会在解决方案上逗留太久，把这个配置放在你的开发服务器中：

   static: {
      directory: path.resolve(__dirname, 'public'),
    },
    port: 3000,
    open: true,
    hot: true,
    compress:true,
    historyApiFallback: true,
  },

如果您有兴趣了解有关此新配置如何工作的更多信息并且文档非常混乱，请查看此更新的教程