react17_Integration_framework/config-overrides.js at master · islittle/react17_Integration_framework · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
/*
 * @Author: wangfeng
 * @Date: 2020-02-20 12:02:39
 * @LastAuthor: wangfeng
 * @lastTime: 2021-01-20 19:48:02
 * @FilePath: /yit-h5/Users/wangfeng/work/reactnew-demo/config-overrides.js
 */
const {
    override, fixBabelImports, addWebpackAlias, addDecoratorsLegacy, addPostcssPlugins, addLessLoader,
} = require('customize-cra');
const path = require('path');

const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');

const getStyleLoaders = (cssOptions, preProcessor, lessOptions) => { // 这个是use里要设置的，封装了下
    const loaders = [
        require.resolve('style-loader'),
        {
            loader: require.resolve('css-loader'),
            options: cssOptions,
        },
        {
            loader: require.resolve('postcss-loader'),
            options: {
                ident: 'postcss',
                plugins: () => [
                    // eslint-disable-next-line global-require
                    require('postcss-flexbugs-fixes'),
                    // eslint-disable-next-line global-require
                    require('postcss-preset-env')({
                        autoprefixer: {
                            flexbox: 'no-2009',
                        },
                        stage: 3,
                    }),
                ],
            },
        },
    ];
    if (preProcessor) {
        loaders.push({
            loader: require.resolve(preProcessor),
            options: lessOptions,
        });
    }
    return loaders;
};

function resolve(dir) {
    return path.join(__dirname, '.', dir)
}
// 主题色
const { theme } = require('./package')

// const svgSpriteDirs = [
//     require.resolve('antd-mobile').replace(/warn\.js$/, ''), // antd-mobile 内置svg
//     resolve('src/app/assets/svg/'),  // 业务代码本地私有 svg 存放目录
// ];

module.exports = override(
    // antd按需加载
    fixBabelImports('import', {
        libraryName: 'antd-mobile',
        libraryDirectory: 'es',
        // 这里注意了，less使用
        style: true,
    }),
    addLessLoader({
        lessOptions: {
            modifyVars: theme,
            javascriptEnabled: true,
        },
        sourceMap: false,
    }),
    // 别称
    addWebpackAlias({
        '@assets': resolve('src/app/assets'),
        '@components': resolve('src/components'),
        '@config': resolve('config'),
        '@images': resolve('src/app/assets/images'),
        '@svgs': resolve('src/app/assets/svgs'),
        '@pages': resolve('src/pages'),
        '@utils': resolve('src/utils'),
        '@constants': resolve('src/app/constants'),
        '@actions': resolve('src/app/actions'),
        '@reducers': resolve('src/app/reducers')
    }),
    // pxtorem
    // eslint-disable-next-line global-require
    addPostcssPlugins([require('postcss-pxtorem')({
        rootValue: 100,
        selectorBlackList: [], // 过滤
        propList: ['*'],
        minPixelValue: 2,
    }),]),
    // svg sprite webpack已有相关配置，未启用
    // addWebpackModuleRule({
    //     test: /\.svg$/i,
    //     loader: 'svg-sprite-loader',
    //     include: svgSpriteDirs,
    //     options: {
    //         symbolId: '[name]'
    //     }
    // }),
    addDecoratorsLegacy(), // 使用装饰器
    // disableEsLint(),
    (config) => {
        // 增加处理less module配置 customize-cra 不提供 less.module 只提供css.module
        // 然后使用的时候 把原来的less文件改成.module.less 然后在引入文件处改成 import Style from 'XXX.module.less' < div className={Style.styleName}></div>
        const oneOfLoc = config.module.rules.findIndex((nc) => nc.oneOf) // 这里的config是全局的
        // eslint-disable-next-line no-param-reassign
        config.module.rules[oneOfLoc].oneOf = [
            {
                test: /\.module\.less$/,
                use: getStyleLoaders(
                    {
                        importLoaders: 2,
                        modules: {
                            getLocalIdent: getCSSModuleLocalIdent,
                        },
                    },
                    'less-loader',
                ),
            },
            ...config.module.rules[oneOfLoc].oneOf,
        ]

        return config
    },
);