create-react-app找不着webpack配置文件

“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情”

刚开始学react，写样式发现只有css，想些嵌套，整吧那就

npm install -g less

整完发现，哎，webpack的配置文件哪去了

哎好百度来了

为什么create-react-app创建的项目没有webpack.config.js文件！

官方文档提示：默认配置文件都是隐藏的，点开package.json文件，配置的命令是以"react-scripts"来执行，所以打开node_modules文件夹，找到react-scripts， config目录即是你需要找的webpack的配置文件。如果要自定义，运行npm run eject，就可以看到生成一个config目录里面即是我们想要的配置文件

eject呢，会将原本creat react app对webpack，babel等相关配置的封装弹射出来，然后就可以在项目的目录下看到很多配置文件。但这个操作是不可逆的，我们无法再通过其他方式将这些暴露出来的配置还原回去。

然后我看到一种方法

使用

node-less-chokidar

npm-run-all

这两个库，先导入它们

npm install node-less-chokidar --save-dev
npm install npm-run-all --save-dev

然后修改package.json

"scripts": {
    "start": "npm run build-css && run-p -ncr watch-css start-js",
    "start-js": "react-scripts start",
 
    "build": "run-s -n build-css build-js",
    "build-js": "react-scripts build",
 
    "test": "run-s -n build-css test-js",
    "test-js": "react-scripts test --env=jsdom",
 
    "build-css": "node-less-chokidar src",
    "watch-css": "node-less-chokidar src --watch"
},
"devDependencies": {
    "node-less-chokidar": "^0.3.0",
    "npm-run-all": "^4.1.3"
}

这个库的原理是，在执行create-react-app之前，就把less编译成css并放在less所在的文件夹里面。所以，项目中js里面引用css的语句不用改成less，只需要把.css文件改成.less文件即可。

这里其实有一个问题，无法在less更改后生成的css自动更改。每次都需要npm start，相对来说会损耗性能。