React搭建环境指南

安装脚手架

npm install create-react-app

利用脚手架搭建项目

npx creact-react-app

暴露配置项

npm run eject

如果需要安装less

• 打开webpack.config.js找到下面代码所在位置

style files regexes

• 将以下代码添加到规则后面

// 添加 less 解析规则
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

• 添加完成后找到oneOf位置，添加以下代码

          {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 4,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                'less-loader'
              ),
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 4,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                'less-loader'
              )
            },

• 安装 less 和 less-loader 插件

npm install less less-loader --s

• 重新编译即可

注意，如果使用ant-design-mobile的话，请优先配置less，确认配置有效了再安装ant-desian-mobile，不然会出现莫名奇妙的less不生效，项目启动正常，还不报错，至今我也未找到原因，有找到原因的大佬请联系我，传送门在此。然后我在不安装ant-design-mobile的情况下，项目安装less正常

如果需要做移动端适配

• 使用yarn 安装项目所需依赖后，安装 lib-flexible 、 postcss-px2rem 和 postcss-loader：

yarn add postcss-px2rem lib-flexible 
yarn add postcss-loader --dev

• 在入口页面 index.html 中设置<meta>标签：

<meta name="viewport" content="width=device-width,inital-scale=1.0,
    maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

• 然后在项目入口文件 index.js 中引入 lib-flexible：

import 'lib-flexible';

• 接着，在项目config目录下的 webpack.config.js 中引入 postcss-px2rem ：

const px2rem = require('postcss-px2rem')

• 同时，在 webpack.config.js 的 postcss-loader loader里面添加 ：

{
        loader: require.resolve('postcss-loader'),
        options: {
          /* 省略代码... */
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            require('postcss-preset-env')({
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
            }),
            px2rem({remUnit: 37.5}), // 添加的内容
            /* 省略代码... */
          ],
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },
      },