关于前端:react脚手架项目webpack4442配置lessantd按需加载路径别名

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/*"]
        }
    }
}