基於create-react-app再次配置

建立react項目：

npm install create-react-app -g

create-react-app  project-name

cd project-name

npm start

 

已經建立好了一個基本的配置，如何基於create-react-app再次配置呢？

1. 把入口文件index.js如何修改爲main.js呢？

node_modules/react-scripts/config/paths.js下：把全部的appIndexJs 對應的index.js改爲main.js便可。想修改index.html同理

module.exports = {
  dotenv: resolveApp('.env'),
  appBuild: resolveApp('build'),
  appPublic: resolveApp('public'),
  appHtml: resolveApp('public/index.html'),
  appIndexJs: resolveApp('src/main.js'),
  appPackageJson: resolveApp('package.json'),
  appSrc: resolveApp('src'),
  yarnLockFile: resolveApp('yarn.lock'),
  testsSetup: resolveApp('src/setupTests.js'),
  appNodeModules: resolveApp('node_modules'),
  publicUrl: getPublicUrl(resolveApp('package.json')),
  servedPath: getServedPath(resolveApp('package.json')),
};

 

2. 若是配置css預處理器,如stylus?

　　npm install stylus stylus-loader --save-dev

　　node_modules/react-scripts/config/webpack.config.dev.js下：  添加上這兩個，便可。在webpack.config.prod.js裏也要做相應的修改。

   

 

3. 如何修改端口號呢？

 node_modules/react-scripts/scripts/start.js中：

　　把3000端口修改爲本身想要的端口便可哦。

 

4.把報錯信息映射到源碼中

 

devtool: 'source-map',

 

5.配置別名: 在resolve下的alias下配置

 

6.其餘參考資料：

基於create-react-app的再配置：https://www.cnblogs.com/xiaohuochai/p/8491055.html
create-react-app自定義配置：https://www.jianshu.com/p/45ebcea63057