create-react-app環境搭建

這是我在學習react過程當中所遇到的問題以及解決辦法

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

<!--一、安裝less-->
    yarn add less less-loader
    <!--二、配置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樣式顯示不全的問題-->
複製代碼