react脚手架项目[email protected]配置less，antd按需加载，路径别名

antd按需加载

1. 需要安装babel-plugin-import，less，less-loader
2. 在webpack.config.js的 oneOf 后面添加less配置

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

3. 在webpack.config.js中的getStyleLoaders方法后面添加此段

if (preProcessor === "less-loader") {
    loaders.push({
        loader: require.resolve(preProcessor),
        options: {
            modifyVars: { //自定义主题
            'primary-color': ' #1890ff ',
        },
        javascriptEnabled: true,
    })
}

配置路径别名

1. 找到webpack.config.js中的alias配置

alias: {
    'react-native': 'react-native-web',
    ...(isEnvProductionProfile && {
        'react-dom$': 'react-dom/profiling',
        'scheduler/tracing': 'scheduler/tracing-profiling',
    }),
    ...(modules.webpackAliases || {}),
    '@': resolve(__dirname, '../src')
},

2. 如果是ts项目需要在tsconfig.json文件中添加声明

{
    "compilerOptions": {
        "baseUrl": ".",
            "paths": {
              "@/*": ["src/*"]
        }
    }
}