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 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,
        },
      },