reactjs - 刷新页面时,Django-React-Webpack 集成不输出更新的 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/Apr/2021 22:00:20] "GET /%20static%20/frontend/main.js HTTP/1.1" 304 0。所以发生的事情是 python当我刷新页面时,服务器很少为静态文件运行 GET。我想了解为什么会发生这种情况以及如何解决它。
这是我的文件夹结构:
- 距离
- 捆绑.js
- main.js
- 捆绑.js
- 源代码
- 成分
- index.js
- 成分
- 静止的
- 前端
- main.js
- 前端
- 模板
- 前端
- 索引.html
- 前端
- babel.config.json
- 包.json
- webpack.config.js
这是我的代码:
index.js -
import App from "./components/App/App";
索引.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>
babel.config.json
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"node": "10"
}
}
],
"@babel/preset-react"
],
"plugins": ["@babel/plugin-proposal-class-properties"]
}
包.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
}),
],
};
解决方案
推荐阅读
- html - 反应部署后 Netlify 出现 404 错误
- sql-server - 保存 MSSQL docker 容器数据的最佳方法是什么?
- python - 通过另外两列更新熊猫
- vue.js - 如何使用 Vue.js 和 Tailwind 有条件地将多个类添加到基于数组中的元素?
- asp.net - 添加中间件后无法连接到 Asp.net API
- assembly - 当我尝试链接 .obj 文件 (ASSEMBLY) 时,出现一些错误,包括 Hello.obj : error LNK2001: unresolved external symbol _StdOut@4?
- .net - 带有 SecurityProtocolType.SystemDefault 的 HTTPS 请求会触发 Symantec EndPoint Protection“WS.Reputation.1”
- html - 添加向下滚动功能以仅使用 CSS 和 HTML 选择框选项
- python - Django - 具有来自另一个模型的条目的模型实例
- android-studio-4.2 - Android Studio 更新到 4.2 后 getClassLoader().getResourceAsStream(file_path) 返回 null