欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 教育 > 锐评 > create-react-app创建的项目中设置webpack配置

create-react-app创建的项目中设置webpack配置

2024/10/24 4:42:12 来源:https://blog.csdn.net/m0_63542260/article/details/139919372  浏览:    关键词:create-react-app创建的项目中设置webpack配置

 create-react-app 创建的项目默认使用的是 react-scripts(存在于node_modules文件夹中)来处理开发服务器和构建,它内置了一些webpack相关配置。一般不会暴露出来给开发者,但是在有些情况下我们需要修改下webpack默认配置,如修改outputPath、sourcemap方案等,但由于 eject是不可逆的,所以craco插件应运而生,为我们提供了更好的解决方案。

craco(Create React App Configuration Override)用来自定义由 create-react-app 创建的项目内部配置,比如修改 webpack 配置,覆盖react-scripts的默认设置。

安装:

npm install  @craco/craco react-app-rewire-alias(建议安装在dependencies中)

 配置:

 在项目根目录下创建 craco.config.js 文件,并且在package.json文件中修改一些配置如下:

// 将如下模块代码
"scripts": {"start": "react-scripts start","build": "react-scripts  build","test": "react-scripts  test","eject": "react-scripts eject"},
// 换成
"scripts": {"start": "craco start","build": "craco build","test": "craco test","eject": "react-scripts eject"},

 craco.config.js 文件配置:

const path = require("path");
const { CracoAliasPlugin } = require("react-app-rewire-alias");module.exports = {// webpack 配置webpack: {// 配置内容},// 配置别名plugins: [// 配置内容],
};

以上配置完成后重启项目

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com