Reactjs 当我刷新页面时，Django React网页包集成不会输出更新的React组件_Reactjs_Django_Webpack_Django React

Reactjs 当我刷新页面时，Django React网页包集成不会输出更新的React组件

reactjs django webpack

Reactjs 当我刷新页面时，Django React网页包集成不会输出更新的React组件,reactjs,django,webpack,django-react,Reactjs,Django,Webpack,Django React,我一直在尝试使用Babel和Webpack集成React到Django应用程序，但运行更新的.js输出文件时遇到了困难我相信我的问题来自main.js文件Webpack输出并没有反映来自React组件的更新。我的意思是，当我刷新页面时，我的服务器不会加载带有更新代码的main.js文件当我刷新页面时，只会在我的python终端上运行（大部分时间）：[20/Apr/2021 22:01:02]“GET/HTTP/1.1”200 1509。虽然有时我的静态文件也会运行，但这似乎是随机的：[20

我一直在尝试使用Babel和Webpack集成React到Django应用程序，但运行更新的.js输出文件时遇到了困难

我相信我的问题来自main.js文件Webpack输出并没有反映来自React组件的更新。我的意思是，当我刷新页面时，我的服务器不会加载带有更新代码的main.js文件

当我刷新页面时，只会在我的python终端上运行（大部分时间）：[20/Apr/2021 22:01:02]“GET/HTTP/1.1”200 1509。虽然有时我的静态文件也会运行，但这似乎是随机的：[20/Apr/2021 22:00:20]“GET/%20static%20/frontend/main.js HTTP/1.1”304 0。因此，当我刷新页面时，python服务器很少为静态文件运行GET。我想了解为什么会发生这种情况，以及我如何解决它

以下是我的文件夹结构：

距离
- bundle.js
  - main.js
src
- 组成部分
  - index.js
静止的
- 前端
  - main.js
模板
- 前端
  - index.html
babel.config.json
package.json
webpack.config.js

这是我的密码： index.js-

import App from "./components/App/App";

index.html

<!DOCTYPE html>
<html>
    <head>
        {% load static %}
        <link rel="icon" href="{% static 'imgs/acmLogo.ico' %}" />
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>ACM</title>
        <!-- link to css file -->
        <link rel="stylesheet" type="text/css" href="{% static 'css/index.css' %}" />
        
    </head>
    <body>
        <div id="main">
            <div id="app"></div>
        </div>

        <script src="{% static 'frontend/main.js' %}"></script>
    
    </body>
</html>

package.json

{
  "name": "frontend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --watch --mode development",
    "server": "webpack-dev-server",
    "start": "react-scripts start",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.13.15",
    "@babel/preset-env": "^7.13.15",
    "@babel/preset-react": "^7.13.13",
    "babel-loader": "^8.2.2",
    "webpack": "^5.34.0",
    "webpack-cli": "^4.6.0"
  },
  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.13.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-icons": "^4.2.0",
    "react-router-dom": "^5.2.0",
    "webpack-dev-server": "^3.11.2"
  }
}

webpack.config.js

const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./static/frontend"),
    filename: "main.js"
  },
  module: {
    rules: [
      {
        test: /\.(js)$/,
        exclude: /node_modules/,
        use: "babel-loader"
      },
    ],
  },
  optimization: {
    minimize: true,
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV' : JSON.stringify('development')
        // This has effect on the react lib size
    }),
  ],
};

这可能是django问题，django开发服务器正在为视图的缓存版本提供服务。您可以尝试向django view函数添加never cache decorator，如果这解决了问题，那么您就知道这不是一个网页错误。您也可以尝试打开一个私人浏览器，检查django是否提供更新的视图。每当我在新浏览器上打开网站时，更新的代码都会输出，但不会在页面刷新时输出。我尝试添加一个从不缓存装饰器，但这似乎没有什么不同。

const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./static/frontend"),
    filename: "main.js"
  },
  module: {
    rules: [
      {
        test: /\.(js)$/,
        exclude: /node_modules/,
        use: "babel-loader"
      },
    ],
  },
  optimization: {
    minimize: true,
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV' : JSON.stringify('development')
        // This has effect on the react lib size
    }),
  ],
};