使用react-app-rewired和customize-cra对默认webpack自定义配置
最近在学习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自定义配置的更多相关文章
- 深入 Create React App 核心概念
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
- [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 ...
- 使用create react app教程
This project was bootstrapped with Create React App. Below you will find some information on how to ...
- 如何扩展 Create React App 的 Webpack 配置
如何扩展 Create React App 的 Webpack 配置 原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...
- react系列笔记1 用npx npm命令创建react app
react系列笔记1 用npx npm命令创建react app create-react-app my-app是开始构建新的 React 单页应用程序的最佳方式.它已经为你设置好了开发环境,以便您可 ...
- tap news:week5 0.0 create react app
参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...
- Create React App
Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 - create-react-app. create-react-app遵循约定优于配置(Coc)的原 ...
- [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 ...
- [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 ...
- Create React App 安装less 报错
执行npm run eject 暴露模块 安装 npm i less less-loader -D 1.打开 react app 的 webpack.config.js const sassRege ...
随机推荐
- C#笔记01——注释、进制、基本数据类型、量和输入输出函数
一.注释 1.单行注释 使用方法:行首加 ” //“: VS2019中的快捷键(以后如果不特加说明都是VS2019): 注释(CTRL+E,C): 取消注释(CTRL+E,U): 2.多行注释 使用方 ...
- tensorflow:模型的保存和训练过程可视化
在使用tf来训练模型的时候,难免会出现中断的情况.这时候自然就希望能够将辛辛苦苦得到的中间参数保留下来,不然下次又要重新开始. 保存模型的方法: #之前是各种构建模型graph的操作(矩阵相乘,sig ...
- 关于JMeter原子性相关探究
1.背景 最近宝路遇到个项目,在使用JMeter过程中引发了一些思考,宝路尝试用各种方式去验证,进而有了今天"JMeter原子性"相关主题. 2.目的 探究JMeter的事务的原子 ...
- Logistic回归算法梯度公式的推导
最近学习Logistic回归算法,在网上看了许多博文,笔者觉得这篇文章http://blog.kamidox.com/logistic-regression.html写得最好.但其中有个关键问题没有讲 ...
- Xtrabackup 增量备份 和 增量还原
目录 测试数据准备 进行全量备份 第一次增量插入一条数据 进行第一次增量备份 注意 第二次增量插入一条数据 进行第二次增量备份 注意 查看xtrabackup_binlog_info中的binlog位 ...
- 简单实现TodoList
Todolist实例 储备知识js的splice的用法 实例逻辑 1 在data里面做一个存一条条留言的列表,往里面添加或者删除留言内容. 2 做一个变量和input双向绑定,然后做一个点击事件把这个 ...
- Kafka use zkCli.sh to check topic offset on linux
> ./zkCli.sh -server zk1host:port,zk2host:port,zk3host:port >help ZooKeeper -server host:port ...
- 【Python3网络爬虫开发实战】6.4-分析Ajax爬取今日头条街拍美图【华为云技术分享】
[摘要] 本节中,我们以今日头条为例来尝试通过分析Ajax请求来抓取网页数据的方法.这次要抓取的目标是今日头条的街拍美图,抓取完成之后,将每组图片分文件夹下载到本地并保存下来. 1. 准备工作 在本节 ...
- 如何对IP地址进行子网划分?
在网络行业,子网划分是必须掌握的的基础知识点,下图是IP地址分类: 子网划分主要掌握的是划分思路,接下来我以192.168.1.72/27的IP划分做为例子: CIDR:无类域间路由. 可以看出192 ...
- luogu P2740 [USACO4.2]草地排水Drainage Ditches |网络流
题目背景 在农夫约翰的农场上,每逢下雨,贝茜最喜欢的三叶草地就积聚了一潭水.这意味着草地被水淹没了,并且小草要继续生长还要花相当长一段时间.因此,农夫约翰修建了一套排水系统来使贝茜的草地免除被大水淹没 ...