webpack 开发服务器仅重新加载一次

Question

好吧，现在我已经在 stackoverflow 上阅读了很多不同的问题，但没有任何运气，它们似乎都转到旧版本的 webpack-dev-server。

我已经尝试了很多事情，但没有任何运气，我的小应用程序根本不会重新加载/重建多次。

我更改的是 app.tsx 内的文本添加和删除。其他的事情是添加和

标签。

我希望有人能给我提示

图片显示了我更改后保存的情况。

我的 webpack.config

const path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "public"),
    filename: "main.js",
  },

  target: "web",
  devServer: {
    port: "3000",
    static: ["./public"],
    open: true,
    hot: false,
    liveReload: true,
  },
  resolve: {
    extensions: [".js", ".jsx", ".json", ".ts", ".tsx"],
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx|js|jsx)$/,
        exclude: /node_modules/,
        use: "babel-loader",
      },
    ],
  },
};

我的package.json

{
  "name": "reactone",
  "version": "1.0.0",
  "description": "",
  "main": "./src/index.js",
  "scripts": {
    "start": "webpack serve --mode development --env development",
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.17.9",
    "@babel/eslint-parser": "^7.17.0",
    "@babel/plugin-transform-runtime": "^7.17.0",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "@babel/preset-typescript": "^7.16.7",
    "@babel/runtime": "^7.17.9",
    "babel-loader": "^8.2.4",
    "babel-plugin-transform-scss": "^1.1.0",
    "css-loader": "^6.7.1",
    "dart-sass": "^1.25.0",
    "html-webpack-plugin": "^5.5.0",
    "sass-loader": "^12.6.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.8.1"
  },
  "dependencies": {
    "@types/node": "^17.0.24",
    "@types/react": "^18.0.4",
    "@types/react-dom": "^18.0.0",
    "mobx": "^6.5.0",
    "mobx-react": "^7.3.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "typescript": "^4.6.3"
  }
}

我的文件设置

Answer 1

我遇到过同样的问题。就我而言，问题出在文件导入中。

import { Component } from "../component/component";

代替

import { Component } from "../component/Component";

问题在于单词c的小写字母Component而不是大写字母C。由于一个字母而导致数小时的搜索失败：D