react不适用npm run eject生成隐藏配置文件来配置

 

1.需要引入 react-app-rewired与customize-cra包配合使用

npm install react-app-rewired customize-cra

•   更改package.json启动下文件

  "start": "react-app-rewired start",
      "build": "react-app-rewired build",
      "test": "react-app-rewired test",
      "eject": "react-scripts eject"  //无需改变
  
  注意：如运到无法启动的原因，该变为"react-app-rewired": "^1.6.2","react-scripts": "2.0.3"就可以解决问题

   

2.在根目录下创建config-overrides.js文件

module.exports = function override(config, env) {
  // 关于webpack的相关配置
  return config;
};

3.引入antd框架按需加载

npm install babel-plugin-import

3.1 在config-overrides.js里配置

const {override,fixBabelImports} = require('customize-cra')

module.exports = override(
    /**
     * @Descripttion: 按需加载antd
     * @param {type} 
     * @return: 
     */    
    fixBabelImports("import",{
        libraryName:"antd",
        libraryDirectory:'es',
        style:'css',
    }),
)

4.引入less配置

npm install less less-loader

4.1 在config-overrides.js里配置

const {override,fixBabelImports,addLessLoader} = require('customize-cra')

module.exports = override(
    /**
     * @Descripttion: 按需加载antd
     * @param {type} 
     * @return: 
     */    
    fixBabelImports("import",{
        libraryName:"antd",
        libraryDirectory:'es',
        style:true,
    }),
    /**
     * @Descripttion: 配置less 
     * @modifyVars: 主题配置
     * @return: 
     */
    addLessLoader({
        javascriptEnabled: true,
        modifyVars: { '@primary-color': '#1DA57A' },
    })
)

 5. 解决跨域问题 

npm install http-proxy-middleware

　　5.1 需要在根目录下创建 setupProxy.js文件

const proxy = require('http-proxy-middleware')

module.exports = function(app) {
  app.use(
    proxy.createProxyMiddleware('/api', {
      target: 'http://xxxxx:12306/',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    })
  )
}

　5.2 方法二config-overrides.js里配置

const {
    override,
    fixBabelImports,
    addLessLoader,
    overrideDevServer
} = require('customize-cra')

/**
 * @Descripttion: 跨域配置
 */
const devServerConfig = () => config => {
    return {
        ...config,
        compress: true,
        proxy: {
            "/api": {
                target: 'http://localhost:12306/',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}

module.exports = {
    webpack: override(
        /**
         * @Descripttion: 按需加载antd
         * @param {type} 
         * @return: 
         */
        fixBabelImports("import", {
            libraryName: "antd",
            libraryDirectory: 'es',
            style: true,
        }),
        /**
         * @Descripttion: 配置less 
         * @modifyVars: 主题配置
         * @return: 
         */
        addLessLoader({
            javascriptEnabled: true,
            modifyVars: {
                '@primary-color': '#1DA57A'
            },
        })
    ),
    devServer: overrideDevServer(
        devServerConfig()
    )
}

 6. config-overrides.js其他配置

const {
    override,
    fixBabelImports,
    addLessLoader,
    overrideDevServer
} = require('customize-cra')

const path = require("path")
const paths = require('react-scripts/config/paths')


//配置端口号
process.env.PORT = 12306

/**
 * @Descripttion: 跨域配置
 */
const devServerConfig = () => config => {
    return {
        ...config,
        compress: true,
        proxy: {
            "/api": {
                target: 'http://localhost:12306/',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}
/**
 * @Descripttion: 打包配置
 */
const addCustomize = () => config => {
    if (process.env.NODE_ENV === 'production') {
        // 关闭sourceMap
        config.devtool = false;
        // 配置打包后的文件位置修改path目录
        paths.appBuild = path.join(path.dirname(paths.appBuild), 'dist')
        config.output.path = path.join(path.dirname(config.output.path), 'dist')
    }
    return config;
}
// 去除生产环境中console

const dropConsole = () => {
    return config => {
        if (config.optimization.minimizer) {
            config.optimization.minimizer.forEach(minimizer => {
                if (minimizer.constructor.name === 'TerserPlugin') {
                    minimizer.options.terserOptions.compress.drop_console = true
                }
            })
        }
        return config
    }
}

module.exports = {
    webpack: override(
        /**
         * @Descripttion: 按需加载antd
         * @param {type} 
         * @return: 
         */
        fixBabelImports("import", {
            libraryName: "antd",
            libraryDirectory: 'es',
            style: true,
        }),
        /**
         * @Descripttion: 配置less 
         * @modifyVars: 主题配置
         * @return: 
         */
        addLessLoader({
            javascriptEnabled: true,
            modifyVars: {
                '@primary-color': '#1DA57A'
            },
        }),
        addCustomize(),
        dropConsole(),
    ),
    devServer: overrideDevServer(
        devServerConfig()
    )
}

注：详细文章推荐https://blog.csdn.net/qq_37648307/article/details/106456616?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-4.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-4.nonecase