create-react-app 定义路径别名，默认识别 jsx格式文件

文章参考

1. react-app-rewired github

问题描述

create-react-app 脚手架将配置文件全部都屏蔽了，让用户使用默认配置就能满足大部分需求，有点类似于“乔布斯”的设计理念；
在实际开发中，文件夹的目录嵌套比较深，文件夹也比较多，为了方便管理，就需要设置“绝对路径”

使用 react-app-rewired插件解决

1. 安装依赖库

cnpm install react-app-rewired --save-dev

2. 在项目的根目录创建config-overrides.js 文件

const path = require('path')

function resolve (dir) {
  return path.join(__dirname, '.', dir)
}

/* config-overrides.js */
module.exports = function override(config, env) {
  //do stuff with the webpack config...
  // alias
  config.resolve.alias = {
    ...config.resolve.alias,
    '@': resolve('src'),
    '@components': resolve('components'),
    '@page': resolve('src/page')
  };
  config.resolve.extensions = ['.js','.jsx','.json']
  return config;
}

3. 修改启动脚本 package.json

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
}

4. 启动工程,执行 “npm run start” 命令

放出create-react-app默认配置，修改webpack配置文件

1. 安装脚手架依赖库,执行 'npm run eject’命令，释放出默认配置
2. 删除依赖库，执行’npm install’ 重新安装依赖库
3. 修改工程名/config/webpack.config.js文件

resolve: {
      alias: {
        'react-native': 'react-native-web',
        ...(isEnvProductionProfile && {
          'react-dom$': 'react-dom/profiling',
          'scheduler/tracing': 'scheduler/tracing-profiling',
        }),
        ...(modules.webpackAliases || {}),
        '@': path.resolve(__dirname, '../src'),
        '@components': path.resolve(__dirname, '../src/components'),
        '@pages': path.resolve(__dirname, '../src/pages')
      },
      extensions: ['.js', '.jsx', '.json']
}	  

@components 代表的是 '工程名/src/components’目录
@pages 代表的是 '工程名/src/pages’目录

4. 重新执行’npm run start’命令，启动工程