如何覆盖 CRA 默认 webpack 配置

在 CRA 创建的项目中，经常需要修改默认 webpack 配置。但是 CRA 不像 Vue-cli 可以提供自定义 webpack 配置，而 eject 又会把全部配置暴露出来，很麻烦。这种情况下可以使用 react-app-rewired 这个库：

$ yarn add react-app-rewired -D

在项目根目录创建一个 config-overrides.js 文件，添加自定义 webpack 配置：

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

最后在 package.json 中修改 npm scripts：

/* package.json */"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"
}

这个库源码不是很多，推荐看一下：

https://github.com/timarney/react-app-rewired

通常 react-app-rewired 会搭配 customize-cra 这个库一起用：

$ yarn add customize-cra react-app-rewired -D

支持在 config-overrides.js 中编写函数式的 API 去修改 webpack 配置：

const {override,addDecoratorsLegacy,disableEsLint,addWebpackAlias
} = require("customize-cra");
const path = require("path");module.exports = override(// enable legacy decorators babel pluginaddDecoratorsLegacy(),// disable eslint in webpackdisableEsLint(),// add an alias for "ag-grid-react" importsaddWebpackAlias({["ag-grid-react$"]: path.resolve(__dirname, "src/shared/agGridWrapper.js")}),
);

https://github.com/arackaf/customize-cra

如何覆盖 CRA 默认 webpack 配置相关推荐

vue中webpack默认配置_Vue-cli 中 Webpack 配置优化（一）
一.前言最近一段时间在学习 Webpack 方面的知识.在学习的过程中主要配置的是 webpack.config.js 文件. 但是在 Vue-cli 3.x 下,已经对 Webpack 做了深度的 ...
vuepress侧边栏配置_VuePress默认主题配置(default theme config) - VuePress中文网
# 默认主题配置(default theme config) 提示此页面上列出的所有选项仅适用于默认主题.如果你使用的是自定义主题,则选项可能会有所不同. # 主页(Homepage) 默认主题提供 ...
在 angular6 中自定义 webpack 配置
在 angular6 中自定义 webpack 配置我们已经使用 angular6 开发了一套后台管理系统,且体量日益增大,为了优化打包速度,想从 webpack 着手. 但是Angular Cli ...
干货！快速上手typescript的学习笔记（对比JS的新特性，环境搭建，webpack配置，ts编译配置）
前提需要有js的基础文章目录 TypeScript 产生背景什么是TypeScript? TypeScript增加了什么 TypeScript开发环境搭建基本类型编译文件配置 tsconfig ...
Flask + Nginx + React + Webpack 配置解决跨域问题
用 Flask 做后端开发单页应用,webpack-dev-server 生成静态文件在http://localhost:8080 下,Flask 页面在 http://localhost:5000 ...
vue-cli中的webpack配置
编辑模式下显示正常,打开的时候不知道为啥排版有问题. segementfalut链接在这里版本号 vue-cli 2.8.1 (终端通过vue -V 可查看) vue 2.2.2 webpack 2 ...
webpack打包生成的map文件_从这十几个方面优化你的 Webpack 配置
目录开发环境性能优化生产环境性能优化开发环境性能优化优化打包构建速度 HMR 优化代码调试 source-map HMR ❝ 概念:「HMR:」 hot module replacement ...
结合webpack配置_前端 Webpack 工程化的最佳实践
作者 | 阿里文娱前端开发专家芃苏责编 | 屠敏头图 | CSDN 下载自视觉中国引言 ▐ 前端构建工具的演变回想在2015-2016年的时候,开发者们开始渐渐把视线从大量使用Task Runn ...
vue-cli webpack配置分析 - chenBright - SegmentFault 思否
相信vue使用者对vue-cli都不会陌生,甚至可以说,很熟悉了,但对其webpack的配置可能知之甚少吧. 过完年回来后,我接手了公司的新项目.新项目是一个spa.很自然,我就想到了vue-cli脚 ...
六、Webpack详解学习笔记——webpack的安装、起步、配置、loader的使用、webpack中配置Vue、plugin的使用、搭建本地服务器、webpack配置的分离
一.认识webpack 什么是webpack? 这个webpack还真不是一两句话可以说清楚的. 我们先看看官方的解释: At its core, webpack is a static module ...

如何覆盖 CRA 默认 webpack 配置

如何覆盖 CRA 默认 webpack 配置相关推荐

最新文章

热门文章