react学习 - 自定义脚手架配置

最新推荐文章于 2025-05-20 16:51:22 发布

原创最新推荐文章于 2025-05-20 16:51:22 发布 · 2.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#react #前端

前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何通过react-app-rewired自定义create-react-app项目的webpack配置，以便更好地支持开发需求，并提供了AntD按需引入的具体实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义create-react-app配置

上一篇博客: react学习 - 使用react脚手架中讲了如何安装一个react scaffolding, 这篇主要讲, 如何自定义配置来帮助我们更好的进行开发.

在整个项目中, 只在根目录发现了package.json这个文件, 并没有发现 webpack.json或者类似的配置文件, 难道这个脚手架不是用webpack打包的么?

查看package.json 发现是使用的 react-scripts. 然后去搜了一下, 发现这个是基于webpack的. 所以我们去看了一下这个包.

/node_modules/react-scripts/config/webpack.config.prod.js

这个配置就是webpack的配置了. 如果本来就是打算本地临时打包的时候有一些更改, 那么就直接更改这个文件就好. 如果想要在任何环境都打包出来的一样. 这个文件是不行的.

因为node_modules基本上都是本地的, 不会跟着项目代码走.

1. 安装 react-app-rewired

需要安装: react-app-rewired这个包, 来覆盖默认配置.

yarn add react-app-rewired --dev
//二选一即可
npm install react-app-rewired --save

安装好, 修改package.json

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

对应的以前的start, build, test全部改成这个样子.

2. 创建覆盖配置文件

在同package.json同级目录下创建: config-overrides.js 内容如下:

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

这里的config就是webpack.prod.js文件里面的配置.

以上就可以了.

AntD按需引入

参考: 在 create-react-app 中使用antd

样例

我修改了一下样例, 自定义build文件名称:

const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = function override(config, env) {
    config.output.filename = 'static/js/main.js';
    config.plugins.forEach((item, index) => {
        if (item instanceof ExtractTextPlugin) {
            config.plugins.splice(index, 1);
        }
    });
    config.plugins.push(new ExtractTextPlugin({
        filename: 'static/css/main.css',
    }));
    return config;
}