最近在学习react框架,之前一直都是用vue 开发,知道在vue 中知道如何配置一下相关的webpack 有助于开发,学react 过程中,我也在想这些该怎么配置啊,所以就有这篇文章。

这篇文章主要是讲 react-create-app 生成的项目利用 react-app-rewired 和 customize-cra 的配置

1. 首先我们 创建一个项目 myapp ,执行命令

npm create react-app myapp

2. 然后安装 react-app-rewired 和 customize-cra

npm install react-app-rewired customize-cra  --save-dev

3. 改写package.json 的启动命令

/* package.json */
原来的:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject" } 修改后的:
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
}

4. 修改后直接执行npm start 启动项目,你会发现报错,没关系,报错就解决,你会发现报错信息中有:

The “injectBabelPlugin” helper has been deprecated as of v2.0
翻译:
自2.0版起,“injectbabelplugin”助手已被弃用

react-app-rewired的新版本删除了injectBabelPlugin,这些方法被移动到一个名为’customize-cra’的新包中

解决方案就是降低版本,执行两个命令:

npm uninstall react-app-rewired  //删原来的
npm install react-app-rewired@2.0. --save-dev //安装指定底版本的

执行 npm start 命令后,项目就可以跑起来了

5. 项目的根目录会多一个配置文件config-overrides.js (如果没有,手动新建)

接下来做一些webpage的配置,比如插件配置,路径别名,ui 插件按需加载,修改、添加loader

直接上完整代码,带注释

const { override, fixBabelImports ,addWebpackExternals ,addWebpackAlias ,addLessLoader } = require('customize-cra');
const path = require("path")
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
const myPlugin = [
new UglifyJsPlugin(
{
uglifyOptions: {
warnings: false,
compress: {
drop_debugger: true,
drop_console: true
}
}
}
)
] module.exports = override(
fixBabelImports('import', { //配置按需加载
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
addWebpackExternals({ //不做打包处理配置,如直接以cdn引入的
echarts: "window.echarts",
// highcharts:"window.highcharts"
}),
addWebpackAlias({ //路径别名
'@': path.resolve(__dirname, 'src'),
}),
addLessLoader({
javascriptEnabled: true,
modifyVars: {
'@primary-color': '#1DA57A'
}
}),
(config)=>{ //暴露webpack的配置 config ,evn
// 去掉打包生产map 文件
// config.devtool = config.mode === 'development' ? 'cheap-module-source-map' : false;
if(process.env.NODE_ENV==="production") config.devtool=false;
if(process.env.NODE_ENV!=="development") config.plugins = [...config.plugins,...myPlugin]
//1.修改、添加loader 配置 :
// 所有的loaders规则是在config.module.rules(数组)的第二项
// 即:config.module.rules[2].oneof (如果不是,具体可以打印 一下是第几项目)
// 修改 sass 配置 ,规则 loader 在第五项(具体看配置)
const loaders = config.module.rules.find(rule => Array.isArray(rule.oneOf)).oneOf;
loaders[5].use.push({
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, 'src/asset/base.scss')//全局引入公共的scss 文件
}
}) return config
} );

  

 

使用react-app-rewired和customize-cra对默认webpack自定义配置的更多相关文章

  1. 深入 Create React App 核心概念

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

  2. [Poi] Customize Babel to Build a React App with Poi

    Developing React with Poi is as easy as adding the babel-preset-react-appto a .babelrc and installin ...

  3. 使用create react app教程

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

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

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

  5. react系列笔记1 用npx npm命令创建react app

    react系列笔记1 用npx npm命令创建react app create-react-app my-app是开始构建新的 React 单页应用程序的最佳方式.它已经为你设置好了开发环境,以便您可 ...

  6. tap news:week5 0.0 create react app

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

  7. Create React App

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

  8. [Parcel] Bundle a React App with Parcel

    Parcel comes in as the new cool kid in the bundlers world. Unlike other bundlers which take lots of ...

  9. [PReact] Reduce the Size of a React App in Two Lines with preact-compat

    Not every app is greenfield, and it would be a shame if existing React apps could not benefit from t ...

  10. Create React App 安装less 报错

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

随机推荐

  1. C#笔记01——注释、进制、基本数据类型、量和输入输出函数

    一.注释 1.单行注释 使用方法:行首加 ” //“: VS2019中的快捷键(以后如果不特加说明都是VS2019): 注释(CTRL+E,C): 取消注释(CTRL+E,U): 2.多行注释 使用方 ...

  2. tensorflow:模型的保存和训练过程可视化

    在使用tf来训练模型的时候,难免会出现中断的情况.这时候自然就希望能够将辛辛苦苦得到的中间参数保留下来,不然下次又要重新开始. 保存模型的方法: #之前是各种构建模型graph的操作(矩阵相乘,sig ...

  3. 关于JMeter原子性相关探究

    1.背景 最近宝路遇到个项目,在使用JMeter过程中引发了一些思考,宝路尝试用各种方式去验证,进而有了今天"JMeter原子性"相关主题. 2.目的 探究JMeter的事务的原子 ...

  4. Logistic回归算法梯度公式的推导

    最近学习Logistic回归算法,在网上看了许多博文,笔者觉得这篇文章http://blog.kamidox.com/logistic-regression.html写得最好.但其中有个关键问题没有讲 ...

  5. Xtrabackup 增量备份 和 增量还原

    目录 测试数据准备 进行全量备份 第一次增量插入一条数据 进行第一次增量备份 注意 第二次增量插入一条数据 进行第二次增量备份 注意 查看xtrabackup_binlog_info中的binlog位 ...

  6. 简单实现TodoList

    Todolist实例 储备知识js的splice的用法 实例逻辑 1 在data里面做一个存一条条留言的列表,往里面添加或者删除留言内容. 2 做一个变量和input双向绑定,然后做一个点击事件把这个 ...

  7. Kafka use zkCli.sh to check topic offset on linux

    > ./zkCli.sh -server zk1host:port,zk2host:port,zk3host:port >help ZooKeeper -server host:port ...

  8. 【Python3网络爬虫开发实战】6.4-分析Ajax爬取今日头条街拍美图【华为云技术分享】

    [摘要] 本节中,我们以今日头条为例来尝试通过分析Ajax请求来抓取网页数据的方法.这次要抓取的目标是今日头条的街拍美图,抓取完成之后,将每组图片分文件夹下载到本地并保存下来. 1. 准备工作 在本节 ...

  9. 如何对IP地址进行子网划分?

    在网络行业,子网划分是必须掌握的的基础知识点,下图是IP地址分类: 子网划分主要掌握的是划分思路,接下来我以192.168.1.72/27的IP划分做为例子: CIDR:无类域间路由. 可以看出192 ...

  10. luogu P2740 [USACO4.2]草地排水Drainage Ditches |网络流

    题目背景 在农夫约翰的农场上,每逢下雨,贝茜最喜欢的三叶草地就积聚了一潭水.这意味着草地被水淹没了,并且小草要继续生长还要花相当长一段时间.因此,农夫约翰修建了一套排水系统来使贝茜的草地免除被大水淹没 ...