vconsole-webpack-plugin
vconsole-webpack-plugin copied to clipboard
diamont1001
Failed in create-react-app v4.0.1
When used in a project created by create-react-app v4, local debugging is useful, but it is invalid after run build
can u show me your package.json?
package.json dependencies
"dependencies": {
"antd": "^4.6.4",
"axios": "^0.21.1",
"react": "^17.0.1",
"react-app-polyfill": "^1.0.6",
"react-dom": "^17.0.1",
"react-scripts": "^4.0.1"
},
"devDependencies": {
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/plugin-proposal-decorators": "^7.10.5",
"@babel/preset-env": "^7.11.5",
"@commitlint/cli": "9.1.2",
"@commitlint/config-conventional": "9.1.2",
"@craco/craco": "^6.0.0",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/jest": "^26.0.15",
"@types/node": "^12.0.0",
"@types/react": "^17.0.0",
"@types/react-css-modules": "^4.6.2",
"@types/react-dom": "^17.0.0",
"babel-plugin-import": "^1.13.0",
"babel-plugin-react-css-modules": "^5.2.6",
"circular-dependency-plugin": "^5.2.0",
"commitizen": "^4.2.1",
"craco-less": "^1.17.0",
"craco-plugin-scoped-css": "^1.1.0",
"cross-env": "^7.0.2",
"cz-conventional-changelog": "^3.3.0",
"env-cmd": "^10.1.0",
"generic-names": "^3.0.0",
"http-proxy-middleware": "^1.0.5",
"husky": "^4.3.0",
"lint-staged": "^10.4.0",
"node-sass": "^4.14.1",
"postcss-less": "^3.1.4",
"postcss-scss": "^3.0.0",
"prettier": "^2.2.1",
"tsconfig-paths-webpack-plugin": "^3.3.0",
"typescript": "^4.1.2",
"vconsole-webpack-plugin": "^1.5.2",
"web-vitals": "^1.0.1",
"webpack-bundle-analyzer": "^3.9.0"
},
webpack config
new vConsolePlugin({
enable: !isBuildProd,
}),
The problem can be reproduced by directly using create-react-app to create a project, then import your plugin, eg:
npx create-react-app my-app --template typescript
我看了下插件和 CRA 的源码，发现问题在 entry 这里，之前你那边也标了 TODO，如下图：
create-react-app v4，entry 在 build 时恰好是 string 。
嗯，我今天我看到了，是 string 的问题，因为插件的原理是通过修改入口文件变量来完成的，但因为是参数形式，在函数体里是改变不了参数原来的值的，但是如果是数组类型的话，它传进来的只是数组的地址，改数组内容是生效的。所以 string 这个确实是不支持！
给 paths.appIndexJs 加个大括号就可以解决了：
: [paths.appIndexJs]
create-react-app 的源码不 eject 的时候改不了 entry，尴尬了