关于前端: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'
    ),
},
  1. 在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')
},
  1. 如果是ts我的项目须要在tsconfig.json文件中增加申明
{
    "compilerOptions": {
        "baseUrl": ".",
            "paths": {
              "@/*": ["src/*"]
        }
    }
}

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理