本文主要内容：通过create-ract-app创建项目，暴露并修改webpack配置

创建项目

安装create-react-app

npm install -g create-react-app

使用create-react-app创建项目

npx create-react-app react-cms
cd react-cms
npm start

这样就创建了一个最简单的react项目，但是还有一些问题，比如我想使用less写样式，还要设置环境变量（比如start和build模式下使用不同的api域名），这些都需要对webpack配置进行修改，但是默认的配置是没有在项目目录的

暴露webpack配置

使用npm run eject命令暴露webpack的配置信息，没有eject的先去安装

npm run eject

执行之后就可以看到项目文件目录下多了一个config文件夹

修改webpack配置

支持less

安装less-loader

npm install less-loader less --save-dev

在webpack.config.js中搜索

const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

改成

const sassRegex = /\.(css|less)$/;
const sassModuleRegex = /\.module\.(css|less)$/;

然后把原来的sass相关的都换成less即可

自定义环境变量

在npm run start 和 npm run build的时候，我们希望使用不同的环境变量，如api的域名，在测试和正式环境一般是不同的。

我期望将环境变量放到env文件夹，所以进行了一些修改

修改config/env.js，改成如下样式，即开发模式调用 env/development 中的环境变量；生产模式调用env/production中的环境变量

var dotenvFiles = [
  `${paths.dotenv}/${NODE_ENV}`,
  // Don't include `.env.local` for `test` environment
  // since normally you expect tests to produce the same
  // results for everyone

].filter(Boolean);

修改config/paths.js 将原来的".env" 改成"env"，我不想用.env来存储环境变量，我想放到env文件夹下面，这样目录更清晰一些

module.exports = {
  dotenv: resolveApp('env'),

环境变量测试好多次都不好用，后来看config/env.js中这段代码才明白，环境变量必须以 "REACT_APP_"开头

const REACT_APP = /^REACT_APP_/i;

function getClientEnvironment(publicUrl) {
  const raw = Object.keys(process.env)
    .filter(key => REACT_APP.test(key))
    .reduce(
      (env, key) => {
        env[key] = process.env[key];
        return env;
      },

同样阅读了其他源码，发现这个配置文件的内容不是js文件，也不是json，就是key=value 的字符串形式，多个变量换行

环境变量举例

REACT_APP_API_ROOT = http://api.mooov.cn/
REACT_APP_PORT = 2000

重新npm run start 后console.log(progress.env)，即可看到我们设置的环境变量

安装redux、react-router-dom

使用redux最好直接安装下面3个，redux，react-redux和中间件redux-thunk

npm install --save redux

npm install --save react-redux

npm install --save redux-thunk

//安装router
npm install --save react-router-dom