create-react-app不暴露webpack配置如何新增配置

qq_28844779

已于 2023-04-17 09:16:51 修改

阅读量501

点赞数

文章标签： webpack javascript 前端

于 2023-04-14 17:10:40 首次发布

本文链接：https://blog.csdn.net/qq_28844779/article/details/130157311

版权

当使用create-react-app且不希望eject时，可以借助customize-cra来添加额外配置，例如为项目添加less支持。首先安装customize-cra和react-app-rewired，然后在config-overrides.js中使用override方法，添加lessLoader和调整styleLoaders配置，最后更改启动脚本为react-app-rewired启动项目。

摘要由CSDN通过智能技术生成

create-react-app不暴露webpack配置如何新增配置

很多人都使用create-react-app进行创建react项目，但是webpack5默认是不显示webpack.config.js文件的，那么如果我们需要新增配置怎么办呢。首先想到的肯定是执行eject 暴露配置文件，这当然是可行的，然而这会导致配置文件完全暴露。我们并不需要修改原有配置，只需要在此基础上新增即可。customize-cra 就能做到。

customize-cra的使用

以配置less支持为例：

npm install customize-cra react-app-rewired --dev

首先安装依赖。
与package.json同级目录下新增 config-overrides.js文件
安装less依赖

yarn add babel-plugin-import less less-loader -d

开始config-overrides.js配置：

const webpack = require('webpack')
const WebpackBar = require('webpackbar')
const { override, addWebpackPlugin,adjustStyleLoaders,addLessLoader, addWebpackAlias } = require('customize-cra')
const path = require('path')

module.exports = {
 webpack: override(
   addWebpackAlias({
     '@': path.resolve(__dirname, './src')
   }),
   addWebpackPlugin(new webpack.ProgressPlugin()),
   addLessLoader({
     lessOptions: {
      localIdentName: '[local]--[hash:base64:5]'
    }
    }),
    adjustStyleLoaders(({ use: [, , postcss] }) => {
     const postcssOptions = postcss.options;
     postcss.options = { postcssOptions };
   })
 )
}

启动脚本改成 react-app-rewired

然后重启服务，less就可以使用了。新增其他配置类似