概述

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. 电商项目中使用Redis实现秒杀功能

    参与过抢购活动就知道,很明显的一点是商即便商品实际没有了也是可以下单成功的,但是在支付的时候会提示你商品没有了. 实现原理:list双向链表 使用redis队列,因为pop操作是原子的,即使有很多用户 ...

  2. LevelDB源码分析-MemTable

    MemTable(db/memtable.h db/memtable.cc db/skiplist.h) LevelDB中存储在内存中的那部分KV数据都存储在memtable中,而memtable中的 ...

  3. 使用jQuery+huandlebars循环中索引(@index)使用技巧(访问父级索引)

    兼容ie8(很实用,复制过来,仅供技术参考,更详细内容请看源地址:http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html) & ...

  4. python入门(八):文件操作

    1.数据的保存: 1) 内存:常用的变量都是在内存里面的 缺点:关机或进程死掉数据丢失 解决方法:将数据保存至文件中 2 )文件:文本内容.二进制的文件内容 3 )数据库:保存    2.读文件: 1 ...

  5. docker镜像加速器

    目前国内比较靠谱的镜像加速器网址:https://www.daocloud.io/mirror

  6. AS3中的getChildByName

    [转载的...............] 在AS3中,我们可以用getChildByName来获取一个元件,但是要注意返回的类型是DisplayObject,这样一旦我们的元件中有一些自定义的方法就不 ...

  7. Python的基本用法

    ---恢复内容开始--- 一.函数 1.1 默认参数 想要计算一个数x的n次方,可以定义如下的函数.但是有时候我们仅仅只需要计算x^2,所以只想使用一个参数即power(x),这时如果仍用如下代码会报 ...

  8. springboot自带定时任务和集成quartz

    1,springboot自带的定时任务  默认是单线程 有这个依赖就可以 <dependency> <groupId>org.springframework.boot</ ...

  9. JS的事件流的概念(重点)

      09-JS的事件流的概念(重点)   在学习jQuery的事件之前,大家必须要对JS的事件有所了解.看下文 事件的概念 HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件 ...

  10. 利用python如何实现团队成员动态抓阄?

    解决思路: 1 确定团队成员个数num,然后根据成员个数生成元素非重复的数组: 2 构成一个团队成员字典,键:成员名  值:0, 然后将生成的数组分别赋值给字典键对应的值: 话不多说,看代码便知: # ...