react-create-app使用react-app-rewired在根目录下添加webpack配置文件

react-create-app使用react-app-rewired在根目录下添加webpack配置文件

仅当个人学习笔记，如有错误欢迎大家指出

1. 安装react-app-rewired与customize-cra

$ npm install react-app-rewired customize-cra

2.修改package.json文件

"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}

3.文件根目录下新增config-overrides.js文件
例如：下面代码是自定义@指向src目录

const path = require('path');

module.exports = function override(config, env){
  // 1使用你自己的 ESLint 
  // console.log(config.module.rules)
  let eslintLoader = config.module.rules[1];
  eslintLoader.use[0].options.useEslintrc = true;

  //2 Add the LESS loader second-to-last
  // (last one must remain as the "file-loader")
  let loaderList = config.module.rules[2].oneOf;
  loaderList.splice(loaderList.length - 1, 0, {
    test: /\.less$/,
    use: ["style-loader", "css-loader", "less-loader"]
  });
  //3自定义目录符号
  config.resolve.alias['@'] = path.resolve(__dirname,'./src')
  
  return config;
}

4.修改默认端口号
package.json下

从Vue转到react，发现react的配置文件默认在node_modules下很不方便，网上有更详细的方法说明，具体请参考：
https://www.npmjs.com/package/react-app-rewired