react脚手架项目webpack@4.44.2配置less,antd按需加载,路径别名

shellingfordly

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/*"]
        }
    }
}
阅读 363
14 声望
0 粉丝
0 条评论
你知道吗?

14 声望
0 粉丝
宣传栏