[英]Webpack is compiling successfully but changes are not reflected in React App
我正在使用 Django 來托管由 babel 編譯並使用 webpack 捆綁的反應應用程序。 webpack 向我顯示編譯成功的消息,如下所示,但未反映更改。 有趣的是,當我稍等片刻時,它確實有效,但有時也沒有線性模式。 我對此很生氣,請幫忙,我看到了,因為我使用的是 OSX:它正在損壞,因為 github 問題說: https://github.com/webpack/webpack-dev-server/issues/24但是它沒有幫助!
npm run dev
> frontend@1.0.0 dev
> webpack --mode development --watch
asset main.js 1.32 MiB [compared for emit] [minimized] (name: main) 1 related asset
runtime modules 1.04 KiB 5 modules
modules by path ./node_modules/ 1.2 MiB
modules by path ./node_modules/axios/ 56.8 KiB 32 modules
modules by path ./node_modules/react-dom/ 1000 KiB 3 modules
modules by path ./node_modules/react/ 85.7 KiB 2 modules
modules by path ./node_modules/scheduler/ 17.3 KiB 2 modules
+ 5 modules
modules by path ./src/ 36.6 KiB
modules by path ./src/components/*.js 30.3 KiB
./src/components/App.js 1.58 KiB [built] [code generated]
+ 9 modules
modules by path ./src/*.js 6.33 KiB
./src/index.js 35 bytes [built] [code generated]
+ 2 modules
webpack 5.74.0 compiled successfully in 2567 ms
assets by status 1.32 MiB [cached] 1 asset
cached modules 1.23 MiB (javascript) 1.04 KiB (runtime) [cached] 61 modules
./src/components/ProfilePage.js 4.05 KiB [built]
webpack 5.74.0 compiled successfully in 209 ms
assets by status 1.32 MiB [cached] 1 asset
cached modules 1.23 MiB (javascript) 1.04 KiB (runtime) [cached] 61 modules
./src/components/ProfilePage.js 4.05 KiB [built]
webpack 5.74.0 compiled successfully in 96 ms
assets by status 1.32 MiB [cached] 1 asset
cached modules 1.23 MiB (javascript) 1.04 KiB (runtime) [cached] 61 modules
./src/components/ProfilePage.js 4.05 KiB [built]
webpack 5.74.0 compiled successfully in 119 ms
assets by status 1.32 MiB [cached] 1 asset
cached modules 1.23 MiB (javascript) 1.04 KiB (runtime) [cached] 61 modules
./src/components/ProfilePage.js 4.05 KiB [built]
webpack 5.74.0 compiled successfully in 91 ms
assets by status 1.32 MiB [cached] 1 asset
cached modules 1.23 MiB (javascript) 1.04 KiB (runtime) [cached] 61 modules
Webpack 配置:
const path = require("path");
const webpack = require("webpack");
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "./static/frontend/"),
filename: "[name].js",
publicPath: "/static/frontend/",
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
],
},
optimization: {
minimize: true,
},
plugins: [
new webpack.DefinePlugin({
"process.env": {
// This has effect on the react lib size
NODE_ENV: JSON.stringify("development"),
},
}),
],
};
通天塔配置
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"node": "10"
}
}
],
"@babel/preset-react"
],
"plugins": ["@babel/plugin-proposal-class-properties"]
}
package.json
{
"name": "frontend",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development --watch",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.18.9",
"@babel/preset-env": "^7.18.9",
"@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"
},
"dependencies": {
"@babel/plugin-proposal-class-properties": "^7.18.6",
"@emotion/react": "^11.10.0",
"@emotion/styled": "^11.10.0",
"@mui/icons-material": "^5.8.4",
"@mui/material": "^5.9.2",
"axios": "^0.27.2",
"bootstrap-icons": "^1.9.1",
"jwt-decode": "^3.1.2",
"react-router-dom": "^6.3.0"
}
}
你可以試試這個!
module.exports = {
mode: 'development',
devServer: {
port: process.env.PORT || 3000,
historyApiFallback: true,
open: true,
compress: true,
// Setup output directory
static: {
directory: path.join(__dirname, 'public'),
watch: {
ignored: /node_modules/,
},
},
},
}
我以前遇到過這個問題,我們的 webpack 非常相似。 對我來說,我使用的是 Chrome,我只是在瀏覽器中單擊了硬重新加載,然后問題就消失了。 您的瀏覽器可能會保留您的緩存。
更多信息: https://stackoverflow.com/a/3951207/12439451
如果沒有修復,請再次檢查您在 webpack 中的路徑。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.