前言
使用create-react-app
创建的react
项目,默认隐藏了对webpack
的控制,但是有的时候我们有需要去改写一些对于webpack
的设置,这是就需要对webpack
的设置进行override
,在这篇文章中,我会给大家介绍两种修改webpack
设置的方法。
话不多说,还是先来share
一下本篇文章的repo
:
1. 如何修改Webpack
create-react-app
允许通过eject
来获取对webpack
的fully control
。
yarn eject
执行了上面的命令之后会在项目下多出两个文件夹,config
和scripts
。
config
可以修改config
文件件中的webpack.config.js
来修改webpack
的所有设置。scripts
可以修改scripts
文件夹中的build.js
,start.js
与test.js
来修改react-script
的逻辑。
eject
的劣势
eject
操作是不可逆的,也就是说,eject
之后所有的通过create-react-app
管理的配置,现在都交由你自己控制,对于新手来说是个灾难,而且,在你执行eject
过程中,create-react-app
也会反复提醒你是否真的要eject
,而且默认选项是false
。
其实对于我这样的新手来说,最好的方式是,给我一个override
的入口,我只修改我想要的地方,其他的我不动,还是交给框架来帮我打理。
然鹅,有没有这样的工具呢?答案是肯定的,可以使用react-app-rewired
。
2. 使用react-app-rewired
react-app-rewired
的官方文档上面做出了如下的说明,鹅且是中文的呦!
此工具可以在不 'eject' 也不创建额外 react-scripts 的情况下修改 create-react-app 内置的 webpack 配置,然后你将拥有 create-react-app 的一切特性,且可以根据你的需要去配置 webpack 的 plugins, loaders 等。
2.1 安装
npm i -D react-app-rewired
2.2 在根目录下,创建config-overrides.js
修改文件为以下的内容:
// config-overrides.js
module.exports = {
webpack: function (config, env) {
return config;
},
jest: function (config) {
return config;
},
devServer: function (configFunction) {
return function (proxy, allowedHost) {
return config;
};
},
paths: function (paths, env) {
return paths;
},
}
作者:yafeya
链接:https://juejin.cn/post/6967750797786349599
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
2.3 修改package.json -> scripts
修改package.json
中的scripts
节点,使用react-app-rewired
代替react-scripts
。只修改start
, build
, 和test
, 这样就能在执行者写命令的时候应用override
的功能了。
{
# ...
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
}
# ...
}
2.4 使用react-app-rewired
案例
-
可访问
Fallback URL
在之前讲
Router
的那片文章的时候,我们已经讲过了,如果希望在routing
的页面直接刷新的话,会返回404
错误,这是因为,React
是一个SPA
,其实routing
的页面是不存在的,需要修改Webpack
设置,将historyApiFallback
设置为true
。我们可以通过
react-app-rewired
来修改。devServer: function (configFunction) { return function (proxy, allowedHost) { const config = configFunction(proxy, allowedHost); config.disableHostCheck = true; config.historyApiFallback = true; return config; }; },
-
修改输出路径
create-react-app
在执行yarn build
后默认的输出路径为build
, 但是,我个人比较习惯dist
。这个也是可以通过react-app-rewired
修改的。webpack: function (config, env) { // configure to dist const path = require('path'); const paths = require('react-scripts/config/paths'); paths.appBuild = path.join(path.dirname(paths.appBuild), 'dist'); config.output.path = path.join(path.dirname(config.output.path), 'dist'); return config; },
需要注意的是,由于修改了输出路径,所以之前的
Dockerfile
,nginx.conf
, 和docker-exec
文件也需要做出相应的修改。