React-路径别名-不抽离webpack配置 方案

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_45430248/article/details/102717432

不抽离 webpack配置的方案

第一步

下载react-app-rewired 和 customize-cra

$ npm install react-app-rewired customize-cra -D

第二步

下载 babel-plugin-import

$ npm install babel-plugin-import -D

第三步

修改package.json里的配置

/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom",
}

第四步

在项目根目录创建一个 config-overrides.js 用于修改默认配置

const { override, fixBabelImports, addWebpackAlias } = require('customize-cra')
const path = require( 'path' )
function resolve ( dir ) {
    return path.join( __dirname, dir)
}
/* 路径别名配置 */
module.exports = override(
    addWebpackAlias({
        '@': resolve('src'),
        components: resolve( './src/components' ),
        assets: resolve( './src/assets' ),
        pages: resolve( './src/pages' ),
        utils: resolve( './src/utils' ),
        layout: resolve( './src/layout' ),
    }),
    /* antd组件按需加载 */
    fixBabelImports('import', {
        libraryName: 'antd-mobile',
        style: 'css',
    }),
);

以上方案 来自antd 覆盖配置方案