React 中customize-cra如何配置webpack中的model

Question

在使用Ant Desint时需要使用customize-cra进行webpack配置,如下：

// config-overrides.js
module.exports = {
    webpack: override(
        fixBabelImports('import', {
            libraryName: 'antd',
            libraryDirectory: 'es',
            style: 'css',
        }
    )
}

但是项目中同时使用了CSS Module，需要对webpack的model属性进行修改，以下是未使用customize-cra时写的:

// config-overrides.js
module.exports = {
    webpack: function (config, env) {
        console.log(config)
        config.module = {
            rules: [
                {
                    test: /\.css$/,
                    exclude: [/node_modules/],
                    use: [
                        'style-loader',
                        {
                            loader: 'css-loader',
                            options: {
                                modules: true,        
                                localIdentName: '[name]-[local]-[hash:base64:5]',  
                            }
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                plugins: [require('autoprefixer')]
                            }
                        }
                    ]
                }
            ]
        }
        return config;
    }
}

那么如何在customize-cra的语法中编辑config.model呢？

Answer 1

我看过customize-cra的源码，目前他们没有这个功能，但是呢，如果你需要使用css modules ，也是可以进行配置的，类似于这样：
1、自定义一个函数：
const debugeLessLoader = () => config => {
const loaders = config.module.rules.find(rule => Array.isArray(rule.oneOf))

.oneOf;

// 修改less-loader 对 css-modules的配置
loaders[loaders.length - 3].use[1].options.modules = true;
loaders[loaders.length - 3].use[1].options.localIdentName = '[local]';
return config;
}

说明一下，这里的config 是webpack的全部配置，你可以修改其他的，我这里是给less-loader增加css moduls

然后在override函数里使用：

const { override, fixBabelImports, addLessLoader, addWebpackAlias } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {

libraryName: 'antd',
libraryDirectory: 'es',
style: true

}),
addLessLoader({

javascriptEnabled: true

}),
debugeLessLoader(),
addWebpackAlias({

["@"]: require('path').resolve(__dirname, "src"),

})
);

希望能帮助到你。