概述

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的方法的更多相关文章

  1. 如何扩展 Create React App 的 Webpack 配置

    如何扩展 Create React App 的 Webpack 配置  原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...

  2. 在 .NET Core 5 中集成 Create React app

    翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...

  3. 深入 Create React App 核心概念

    本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...

  4. tap news:week5 0.0 create react app

    参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...

  5. 使用create react app教程

    This project was bootstrapped with Create React App. Below you will find some information on how to ...

  6. 微信小程序:wx.navigateTo中url无法跳转问题(app.json中配置的tabBar与wx.navigateTo中url引用相同页面导致)

    今天在做微信小程序时,设置wx.navigateTo页面跳转并传参数,点击始终没有效果,代码如下: //事件处理函数 newsDetail: function (event) { console.lo ...

  7. Create React App

    Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 - create-react-app. create-react-app遵循约定优于配置(Coc)的原 ...

  8. create-react-app脚手架中配置sass

    本文介绍如何在react中配置sass 首先将你的文件名称改成scss结尾的文件 然后安装依赖 cnpm install sass-loader node-sass --save-dev 找到node ...

  9. Create React App 安装less 报错

    执行npm run eject 暴露模块 安装 npm i  less less-loader -D 1.打开 react app 的 webpack.config.js const sassRege ...

随机推荐

  1. tcp的发送端一个小包就能打破对端的delay_ack么?

    3.10内核,反向合入4.9的bbr. 最近分析bbr的时候,收集了线上的一些报文,其中有一个疑问一直在我脑海里面,如下: 本身处于delay_ack状态的客户端,大概40ms回复一个delay_ac ...

  2. TCP与UDP,可靠UDP如何实现

    两种协议都是传输层协议,为应用层提供信息载体. TCP协议是基于连接的字节流的可靠协议,有三次握手,四次挥手,超时重传,流量控制(滑动窗口),拥塞控制和差错控制,也正因为有可靠性的保证和控制手段,所以 ...

  3. python21期day01笔记总结

    2019.3.27 S21 day01笔记总结 一.计算机基础知识 1.计算机组成 用户 应用软件程序开发——用到了两个方面: 1语法 : 2解释器.编译器.虚拟机: 操作系统的开发 硬件组成 2.操 ...

  4. 获取当前页面url

    function getCurrUrl() { var url = ""; if (parent !== window) { try { url = window.top.loca ...

  5. iOS app审核被拒申诉

    提交申诉理由之后不需要点击“提交审核”按钮,否则按照重新提交算,需要重新排队,且申诉会不起作用.

  6. python中使用Opencv进行车牌号检测——2018.10.24

    初学Python.Opencv,想用它做个实例解决车牌号检测. 车牌号检测需要分为四个部分:1.车辆图像获取.2.车牌定位.3.车牌字符分割和4.车牌字符识别 在百度查到了车牌识别部分车牌定位和车牌字 ...

  7. PHP牛牛游戏算法

    <?php namespace frontend\business; class NiuNiuGameHelper { /** * @param $card * @return int 结果 - ...

  8. 项目总结18-使用textarea无法判断空值之坑

    项目总结18-使用textarea无法判断空值之坑 今天使用js判断textarea为空,发现怎么都无法成功仔细做了对比测试,发现结果如下: 1-JS代码 if($("#content&qu ...

  9. redis安全删key脚本(模糊匹配,长list,大set等)

    两种情况: 1.删除指定前缀开头的rediskey ,扫描和删除过程中对线上无感知 2.删除一个大的list,set,zset,hash,这种得分批次减少大小,一直缩到0再删 第一种情况:只要知道线上 ...

  10. 别人的Linux私房菜(12)正则表达式与文件格式化处理

    vi gerp awk sed支持正则表达式   cp ls不支持,只能使用bash本身的通配符 正则表达式分为基础正则表达式和拓展正则表达式 使用正则表达式注意语系的影响 http://cn.lin ...