概述

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. 从一个简单的约束看规范性的SQL脚本对数据库运维的影响

    之前提到了约束的一些特点,看起来也没什么大不了的问题,http://www.cnblogs.com/wy123/p/7350265.html以下以实际生产运维中遇到的一个问题来说明规范的重要性. 如下 ...

  2. Netty4.0源码解析 NioServerSocketChannel

    一.引言Netty的Channel在JDK NIO的Channel基础上做了一层封装,提供了更多的功能.Netty的中的Channel实现类主要有:NioServerSocketChannel(用于服 ...

  3. 【Django】数据迁移问题

    最近发现,Django在修改models之后重新生成迁移文件(这里可以生成),再进行数据库迁移的时候老是出错,查询数据库时老是找不到表格或者字段. 尝试过重新新建项目,新建一个同名APP,然后mode ...

  4. 专题 查找与排序的Java代码实现(一)

    专题 查找与排序的Java代码实现(一) 查找(Searching) 线性查找(linear search) 属于无序查找算法,适合于存储结构为顺序存储或链接存储的线性表. 基本思想:从数据结构线形表 ...

  5. elasticsearch 动态增加副本

    动态调整副本数 PUT /ptt-new-2018-11/_settings{ "number_of_replicas": 2} 重建索引, 增加节点后要重建索引. 日志报错为网络 ...

  6. [leetcode]236. Lowest Common Ancestor of a Binary Tree二叉树最近公共祖先

      Given a binary tree, find the lowest common ancestor (LCA) of two given nodes in the tree. Accordi ...

  7. vue 总结

    VUE总结 双花括号{{}} 01.index.hmlt main.js 内存的数据可以更改 v-model 双休数据绑定 代码: <!DOCTYPE html> <html lan ...

  8. CentOS 系统 git clone出错

    CentOS 操作系统 安装npm git clone 项目时出现类似如下错误: fatal: unable to access 'https://github.com/creationix/nvmg ...

  9. 受欢迎的牛[HAOI2006]

    --BZOJ1051 Description 每一头牛的愿望就是变成一头最受欢迎的牛.现在有N头牛,给你M对整数(A,B),表示牛A认为牛B受欢迎. 这 ​ 种关系是具有传递性的,如果A认为B受欢迎, ...

  10. MD5加密算法的Java版本

    网上搜索Java实现MD5的资料很多,错误的也很多. 之前编写的一个阿里云直播鉴权原理算法需要用到MD5算法,网上找了几个,都是不行,浪费了时间,现在贴一个,做备用. import java.secu ...