Webpack 在第一次更新后'building'文件更改时停止模块 (React)



我有一个React应用程序,大多数文件都是在命令调用后正常更新/构建的,然后进行后续的文件更改。特别是除了一个文件之外的所有文件,该文件只生成一次。初始编译和FIRST文件更改。之后,webpack停止构建这个ONE文件。此目录中的所有其他文件构建良好。

package.json

{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"@stripe/react-stripe-js": "^1.6.0",
"@stripe/stripe-js": "^1.21.1",
"@testing-library/jest-dom": "^5.12.0",
"@testing-library/react": "^11.2.6",
"@testing-library/user-event": "^12.8.3",
"axios": "^0.21.1",
"bootstrap": "^5.0.0",
"bootstrap-icons": "^1.5.0",
"cypress": "^8.5.0",
"cypress-plugin-stripe-elements": "^1.0.2",
"dotenv": "^10.0.0",
"lodash": "^4.17.21",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-alert": "^7.0.3",
"react-alert-template-basic": "^1.0.2",
"react-bootstrap": "^1.6.4",
"react-dom": "^17.0.2",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-transition-group": "^4.4.2",
"redux": "^4.1.0",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.3.0",
"web-vitals": "^1.1.2"
},
"scripts": {
"dev": "webpack --mode development  --watch ./frontend/src/index.js  --output-path ./frontend/static/frontend/",
"build": "webpack --mode production ./frontend/src/index.js --output-path ./frontend/static/frontend/",
"test": "cypress open"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/core": "^7.14.5",
"@babel/preset-env": "^7.14.5",
"@babel/preset-react": "^7.14.5",
"babel-loader": "^8.2.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"css-loader": "^6.1.0",
"speed-measure-webpack-plugin": "^1.5.0",
"style-loader": "^3.1.0",
"webpack": "^5.38.1",
"webpack-cli": "^4.7.2"
}
}

webpack.config.js

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin")
const smp = new SpeedMeasurePlugin()
module.exports = {
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
{
test: /.css$/,
exclude: /node_modules/,
use: ["style-loader", "css-loader"],
},
],
},
}

非常感谢您的帮助。我认为测速插件造成了问题,所以我暂时删除了包装器。

经过数小时的搜索。。。问题出在我的进口声明上。我的名字相同,但大小写不正确。

文件名MyComponent.js

错误import MyComponent from "./myComponent

正确imoprt MyComponnent from "./MyComponent

最新更新