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

Question

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

我已经尝试了很多东西，但没有任何运气，我的小应用程序根本不会 reload/rebuild 不止一次。

我更改的内容是在 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

感谢您的文章，我找到了完全相同问题的原因

我的配置如下所示：

// ....
target: "web"
devtool: 'inline-source-map',
mode: 'development',
devServer: {
 static: ["./public"],
 open: true,
 hot: false,
 liveReload: true,
 historyApiFallback: true,
 historyApiFallback: {
  rewrites: historyApiFallbackRewritesGenerator()
 },
}
// ....

希望对您有所帮助

此外，我将 link 附加到我的构建配置中以便完整理解 webpack-template

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

webpack dev server only reloads once

javascript

typescript

reactjs

webpack

webpack-dev-server