create-react-app脚手架中配置webpack的方法
概述
create-react-app脚手架中的react-scripts能够(1)帮我们自动下载需要的webpack依赖;(2)自己写了一个nodejs服务端脚本代码;(3)使用express的Http服务器;(4)并帮我们隐藏了配置文件。
那么假如我们需要额外配置webpack该怎么办呢?比如添加md的loader。
我总结了2种方法,供以后开发时参考,相信对其他人也有用。
方法一
运行如下命令即可把配置文件显示出来:
npm run eject
//然后输入Y
输入后项目目录会多出一个congfig文件夹,里面就有webpack的配置文件。
但是此过程不可逆,所以显现回来后就不能再隐藏回去了。
方法二
(以修改babel插件实现按需加载antd为例,修改其它配置可以仿照这个方法来做。)
(1)使用 react-app-rewired (一个对 create-react-app 进行自定义配置的社区解决方案)和babel-plugin-import(一个babel的管理加载的插件)。
$ yarn add react-app-rewired --dev
$ yarn add babel-plugin-import --dev
//或者使用npm
npm install react-app-rewired --dev
npm install babel-plugin-import --dev
(2)修改package.json 里的启动配置。
/* package.json */
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
}
(3)在项目根目录创建一个 config-overrides.js 用于修改默认配置。
/* config-overrides.js */
const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], config);
return config;
};
create-react-app脚手架中配置webpack的方法的更多相关文章
- 如何扩展 Create React App 的 Webpack 配置
如何扩展 Create React App 的 Webpack 配置 原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...
- 在 .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 核心概念
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
- tap news:week5 0.0 create react app
参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...
- 使用create react app教程
This project was bootstrapped with Create React App. Below you will find some information on how to ...
- 微信小程序:wx.navigateTo中url无法跳转问题(app.json中配置的tabBar与wx.navigateTo中url引用相同页面导致)
今天在做微信小程序时,设置wx.navigateTo页面跳转并传参数,点击始终没有效果,代码如下: //事件处理函数 newsDetail: function (event) { console.lo ...
- Create React App
Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 - create-react-app. create-react-app遵循约定优于配置(Coc)的原 ...
- create-react-app脚手架中配置sass
本文介绍如何在react中配置sass 首先将你的文件名称改成scss结尾的文件 然后安装依赖 cnpm install sass-loader node-sass --save-dev 找到node ...
- Create React App 安装less 报错
执行npm run eject 暴露模块 安装 npm i less less-loader -D 1.打开 react app 的 webpack.config.js const sassRege ...
随机推荐
- tcp的发送端一个小包就能打破对端的delay_ack么?
3.10内核,反向合入4.9的bbr. 最近分析bbr的时候,收集了线上的一些报文,其中有一个疑问一直在我脑海里面,如下: 本身处于delay_ack状态的客户端,大概40ms回复一个delay_ac ...
- TCP与UDP,可靠UDP如何实现
两种协议都是传输层协议,为应用层提供信息载体. TCP协议是基于连接的字节流的可靠协议,有三次握手,四次挥手,超时重传,流量控制(滑动窗口),拥塞控制和差错控制,也正因为有可靠性的保证和控制手段,所以 ...
- python21期day01笔记总结
2019.3.27 S21 day01笔记总结 一.计算机基础知识 1.计算机组成 用户 应用软件程序开发——用到了两个方面: 1语法 : 2解释器.编译器.虚拟机: 操作系统的开发 硬件组成 2.操 ...
- 获取当前页面url
function getCurrUrl() { var url = ""; if (parent !== window) { try { url = window.top.loca ...
- iOS app审核被拒申诉
提交申诉理由之后不需要点击“提交审核”按钮,否则按照重新提交算,需要重新排队,且申诉会不起作用.
- python中使用Opencv进行车牌号检测——2018.10.24
初学Python.Opencv,想用它做个实例解决车牌号检测. 车牌号检测需要分为四个部分:1.车辆图像获取.2.车牌定位.3.车牌字符分割和4.车牌字符识别 在百度查到了车牌识别部分车牌定位和车牌字 ...
- PHP牛牛游戏算法
<?php namespace frontend\business; class NiuNiuGameHelper { /** * @param $card * @return int 结果 - ...
- 项目总结18-使用textarea无法判断空值之坑
项目总结18-使用textarea无法判断空值之坑 今天使用js判断textarea为空,发现怎么都无法成功仔细做了对比测试,发现结果如下: 1-JS代码 if($("#content&qu ...
- redis安全删key脚本(模糊匹配,长list,大set等)
两种情况: 1.删除指定前缀开头的rediskey ,扫描和删除过程中对线上无感知 2.删除一个大的list,set,zset,hash,这种得分批次减少大小,一直缩到0再删 第一种情况:只要知道线上 ...
- 别人的Linux私房菜(12)正则表达式与文件格式化处理
vi gerp awk sed支持正则表达式 cp ls不支持,只能使用bash本身的通配符 正则表达式分为基础正则表达式和拓展正则表达式 使用正则表达式注意语系的影响 http://cn.lin ...