create-react-app环境搭建

这是我在学习react过程中所遇到的问题以及解决办法

• create-react-app创建项目: create-app-react projectName
• 暴露出配置文件：npm run eject
• 项目中使用less:

    <!--1、安装less-->
    yarn add less less-loader
    <!--2、配置webpack.config.js-->
    将test: /\.css$/ 改成test: /\.(css|less)$/
    <!--并在use：中加入以下配置-->
    +{
    +   loader: require.resolve('less-loader')
    +}
复制代码

• 项目中使用antd按需引入

    <!--安装antd-->
    yarn add antd
    <!--安装按需引入插件-->
    yarn add babel-plugin-import --save-dev
    方法一: <!--在package.json中加入以下配置-->
    "babel": {
        "presets": [
            "react-app"
        ],
        +"plugins": [
        +    [
        +        "import",
        +        {
        +            "libraryName": "antd",
        +            "style": "css"
        +        }
        +    ]
        +]
    }
    
    方法二: 
    npm run eject
    <!--在webpack.config.js文件中-->
    在 test: /\.(js|mjs|jsx|ts|tsx)$/ 中的plugins中增加
    ["import", {"libraryName": "antd","style": true }]
    同时在上面配置less的地方加上下面这一句代码
    {
       loader: require.resolve('less-loader'),
    +  options: { javascriptEnabled: true }
    }
    
    <!--ok!现在就可以按需加载antd了-->
复制代码

• 项目中使用css module以及与antd的冲突解决

    <!--使用css module-->
    {
         test: /\.(css|less)$/,
        +exclude: /node_modules/, // 排除node_modules目录
         use: getStyleLoaders({
        +    modules: true, // 新增对css modules的支持
        +    localIdentName: '[name]__[local]__[hash:base64:5]',
            importLoaders: 1,
            sourceMap: isEnvProduction && shouldUseSourceMap,
        })
    },
    <!--因为上面排除了css_modules所以这里一定要再添加个排除src来识别css_modules-->
    {
         test: /\.(css|less)$/,
        +exclude: /src/, // 添加排除src
         use: getStyleLoaders({
        —    // modules: true, // 新增对css modules的支持
        —    // localIdentName: '[name]__[local]__[hash:base64:5]',
            importLoaders: 1,
            sourceMap: isEnvProduction && shouldUseSourceMap,
        })
    },
    <!--现在既可以使用css module 又可以使用antd了，解决了因为配置原因导致antd样式显示不全的问题-->
复制代码