如何扩展 Create React App 的 Webpack 配置
如何扩展 Create React App 的 Webpack 配置
原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-app-override-webpack-config/
Create React App(以下简称 CRA)是创建 React 应用的一个脚手架,它与其他脚手架不同的一个地方就是将一些复杂工具(比如 webpack)的配置封装了起来,让使用者不用关心这些工具的具体配置,从而降低了工具的使用难度。
但是对于一些熟悉 webpack 的开发者来说,他们可能想对 webpack 配置做一些修改,这个时候应该怎么办呢?
其实我们可以通过以下几种方式来修改 webpack 的配置:
- 项目 eject
- 替换 react-scripts 包
- 使用 react-app-rewired
- scripts 包 + override 组合
下面对这几种方式分别进行介绍。
项目 eject
使用 CRA 创建完项目以后,项目在package.json
里面提供了这样一个命令:
1 |
|
执行完这个命令——yarn run eject
后会将封装在 CRA 中的配置全部反编译
到当前项目,这样用户就可以完全取得 webpack 文件的控制权,想怎么修改就怎么修改了。
1 |
|
CRA 与其他脚手架不同的另一个地方,就是可以通过升级其中的react-scripts
包来升级 CRA 的特性。比如用老版本 CRA 创建了一个项目,这个项目不具备 PWA 功能,但只要项目升级了react-scripts
包的版本就可以具备 PWA 的功能,项目本身的代码不需要做任何修改。
但如果我们使用了eject
命令,就再也享受不到 CRA 升级带来的好处了,因为react-scripts
已经是以文件的形式存在于你的项目,而不是以包的形式,所以无法对其升级。
替换 react-scripts 包
react-scripts 是 CRA 的一个核心包,一些脚本和工具的默认配置都集成在里面,使用 CRA 创建项目默认就是使用这个包,但是 CRA 还提供了另外一种方式来创建 CRA 项目,即使用自定义 scripts 包的方式。
1 |
|
自定义包
可以是下面几种形式:
react-scripts
包的版本号,比如0.8.2
,这种形式可以用来安装低版本的react-scripts
包。- 一个已经发布到 npm 仓库上的包的名字,比如
your-scripts
,里面包含了修改过的 webpack 配置。 - 一个 tgz 格式的压缩文件,比如
/your/local/scripts.tgz
,通常是未发布到 npm 仓库的自定义 scripts 包,可以用npm pack
命令生成。
这种方式相对于之前的eject
是一种更灵活地修改 webpack 配置的方式,而且可以做到和 CRA 一样,通过升级 scrips 包来升级项目特性。
自定义 scripts 包的结构可以参照react-scripts
包的结构,只要修改对应的 webpack 配置文件,并安装上所需的 webpack loader 或 plugin 包就可以了。
使用 react-app-rewired
虽然有这两种方式可以扩展 webpack 配置,但是很多开发者还是觉得太麻烦,有没有一种方式可以既不用eject
项目又不用创建自己的 scripts 包呢?答案是肯定的,react-app-rewired 是 react 社区开源的一个修改 CRA 配置的工具。
在 CRA 创建的项目中安装了react-app-rewired
后,可以通过创建一个config-overrides.js
文件来对 webpack 配置进行扩展。
1 |
|
override
方法的第一个参数config
就是 webpack 的配置,在这个方法里面,我们可以对 config
进行扩展,比如安装其他 loader 或者 plugins,最后再将这个 config
对象返回回去。
最后再修改package.json
中的脚本命令,修改内容请见这里。
scripts 包 + override 组合
虽然react-app-rewired
的方式已经可以很方便地修改 webpack 的配置了,但其实我们也可以在自定义的 script 包中实现类似的功能。
在react-app-rewired
的源码中可以看到它核心的包也叫 react-app-rewired,里面重新覆盖了react-scripts
中的几个脚本文件,包括build.js
、start.js
和test.js
。
具体过程是怎样的呢?以build.js
为例:
- 先获取 webpack 的基本配置,然后再调用
config-overrides.js
(就是在根目录中新增的那个文件)中的override
方法,将原先的 webpack 对象作为参数传入, - 再取得经过修改后的 webpack 配置对象
- 最后再调用
react-scripts
中的build.js
脚本,传入修改后的 webpack 对象来执行命令,
具体源码如下:
1 |
|
知道了原理之后,我们也可以修改自定义 scripts 包的脚本文件,还是以build.js
为例,在获取基本 webpack 配置对象和使用 webpack 对象之间加入以下代码:
1 |
|
overrideConfig
就是修改后的 webpack 对象,最后修改调用了 webpack 对象的代码,将原来的 webpack 对象替换成修改后的 webpack 对象。
总结
CRA 是一个非常棒的 React 脚手架工具,但你如果不满足于它的 webpack 默认配置,你可以通过上述几种方式来扩展自己项目的 webpack 配置,这几种方式各有优缺点,可以结合具体的使用场景来选择合适自己的方式。
如何扩展 Create React App 的 Webpack 配置的更多相关文章
- 深入 Create React App 核心概念
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
- 在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...
- 使用create react app教程
This project was bootstrapped with Create React App. Below you will find some information on how to ...
- tap news:week5 0.0 create react app
参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...
- Create React App 安装less 报错
执行npm run eject 暴露模块 安装 npm i less less-loader -D 1.打开 react app 的 webpack.config.js const sassRege ...
- Create React App
Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 - create-react-app. create-react-app遵循约定优于配置(Coc)的原 ...
- create react app的 css loader 进行局部配置
{ test: cssRegex, exclude: cssModuleRegex, use: getStyleLoaders({ importLoaders: 1, sourceMap: isEnv ...
- [React] {svg, css module, sass} support in Create React App 2.0
create-react-app version 2.0 added a lot of new features. One of the new features is added the svgr ...
- [React] Use the Fragment Short Syntax in Create React App 2.0
create-react-app version 2.0 added a lot of new features. One of the new features is upgrading to Ba ...
随机推荐
- unigui 服务器 是否显示 程序窗口
unigui 服务器 是否显示 程序窗口 servermodule 窗体的这个standaloneserver属性 为false 时 显示窗体. 为true 时 不显示窗体. 哈哈
- Spring学习01——HelloSpring
这是一个spring入门demo: package com.su.test; public class HelloWorld { public void say(){ System.out.print ...
- 如何快速查找到多个字典中的公共键(Key)---Python数据结构与算法相关问题与解决技巧
如何快速查找到多个字典中的公共键(Key)-? 实际案例: 西班牙足球甲级联赛,每轮球员进球统计: 第1轮: { '苏亚雷斯':1,'梅西':2,'本泽马':1,...} 第2轮: { '苏亚雷斯 ...
- pycharm运行时出现‘no module named 'requests'’
参考文章:https://www.jianshu.com/p/f7c808365a9e 出现无requests的包的错误--->找包中是否有requests 1.从files下拉框中点击sett ...
- selenium元素定位之css选择器
在selenium元素定位时会用到css选择器选取元素,虽说xpath在定位元素时能解决大部分问题,但使用css选择器选取元素也是一种不错的选择. css相较与xpath选择元素优点如下: 表达式更加 ...
- Bootstrap 学习笔记 项目实战 首页内容介绍 上
效果图: HTML代码: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset ...
- Where we love is home, home that our feet may leave, but not our hearts.
parcel.n. 包裹 endurance.n.耐力 rot.v.腐烂 ornament.n.装饰 pinch.v.捏 nationality.n.国家 sunshine.n.阳光 stagger. ...
- 用 Eclipse 开发 WebService 项目
1.安装tomcat 2.安装CXF 一.为新渠道webservice加入到项目中 首先,创建一个springboot项目,名为webservice-baffle(附件中). 第二步,新建web se ...
- Oracle创建表 创建库 数据恢复
--建用户CREATE USER szs IDENTIFIED BY szs DEFAULT TABLESPACE NN_DATA01 TEMPORARY TABLESPACE temp;--用户赋权 ...
- (一:NIO系列)JAVA NIO 简介
出处:JAVA NIO 简介 Java 中 New I/O类库 是由 Java 1.4 引进的异步 IO.由于之前老的I/O类库是阻塞I/O,New I/O类库的目标就是要让Java支持非阻塞I/O, ...