create-react-app（以下简称 CRA）提供了 webpack 常用配置的封装，使用起来非常方便，通过 CRA 可以快速创建项目模板就可以直接运行，只需要运行以下命令初始化项目
npx create-react-app@latest myapp
生成的目录如下
可以看出项目里面无暴露 webpack.config.js 文件了，不过大部分情况下我们还需要去修改默认的 webpack，比如新增一些自己想要的配置，CRA 也很人性化，提供了一个 eject 的方法来让我们修改 webpack.config.js ，通过运行
CRA 提供自定义 webpack 的方案
npm run eject
// or
yarn run eject
eject 后的项目目录如下
虽然 webpack.config.js 也暴露出来了，但是 webpack.config.js 文件配置一大坨，其实违背了 CRA 的初心，还是得换一种方式，在不改动 CRA 的基础上，能否修改 webpack 的配置？
通过开源社区找到了两种方法，分别是 craco，react-app-rewired 两种工具，这里推荐的是 reac-app-rewired ，笔者体验过，确实挺方便
react-app-rewired 实践
react-app-rewired 需要配合 customize-cra 使用
- 在项目根目录安装上面的两个依赖包
npm install customize-cra react-app-rewired --save-dev
- 根目录新建 config-overrides.js 文件，输入以下内容，例如想要手动新增插件，可以通过 addWebpackPlugin 这个方法，代码如下
const { override, addDecoratorsLegacy, disableEsLint, addWebpackPlugin } = require("customize-cra");
module.exports = override(
addDecoratorsLegacy(),
disableEsLint(),
// 手动新增ModuleFederationPlugin插件
addWebpackPlugin(
new ModuleFederationPlugin({
name: "ccomponent",
filename: "ccomponent.js",
exposes: {
"./button": "./src/components/button",
},
shared: ["react", "react-dom"],
})
)
);
- 替换 package-lock.json 文件的 scripts 命令
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test",
+ "test": "react-app-rewired test",
"eject": "react-scripts eject"
}
总结
CRA 工具是一款非常优秀的工具，配合 react-app-rewired 和 customize-cra 可以更灵活配置适合项目的 webpack 选项，有需要的赶紧用起来吧！
