使用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 ...
随机推荐
- 基于 HTML5 + WebGL 的宇宙(太阳系) 3D 可视化系统
前言 近年来随着引力波的发现.黑洞照片的拍摄.火星上存在水的证据发现等科学上的突破,以及文学影视作品中诸如<三体>.<流浪地球>.<星际穿越>等的传播普及,宇宙空间 ...
- Chapter 04—Basic Data Management
1. 创建新的变量 variable<-expression expression:包含一组大量的操作符和函数.常用的算术操作符如下表: 例1:根据已知变量,创建新变量的三种途径 > my ...
- Springboot中使用redis进行api限流
api限流的场景 限流的需求出现在许多常见的场景中 秒杀活动,有人使用软件恶意刷单抢货,需要限流防止机器参与活动 某api被各式各样系统广泛调用,严重消耗网络.内存等资源,需要合理限流 淘宝获取ip所 ...
- pod install速度慢解决方案
相信大家已经感受到pod install速度越来越慢了,网上提供了几种解决方案,但是都没有完全解决速度慢的问题. 使用国内镜像的Specs 在pod install时使用命令pod install - ...
- 【华为云分享】MongoDB-系统时钟跳变引发的风波
目录 背景 一. 对 oplog 的影响 oplog 原理 二.主备倒换 小结 声明:本文同步发表于 MongoDB 中文社区,传送门:http://www.mongoing.com/archives ...
- .Net core_Excel 导出二维码(以导出箱单为例)
[AccessLogAttribute(Note = "导出条形码箱单 — 条形码")]public ActionResult ExportContract(string INNE ...
- IOS UISwitch 控件
转自:http://my.oschina.net/wolx/blog/396680 一 UISwitch 简介 二 UISwitch 创建 三设置选中状态 四 添加监听 五 测试代码 5.1 代码 5 ...
- mininet(一)实验环境搭建
mininet(一)实验环境搭建 mininet(二)简单的路由实验 mininet(三)简单的NAT实验 最近学习(https://github.com/mininet/openflow-tutor ...
- mybatis错题
第一题 解析: MyBatis的动态SQL中没有else元素,when元素的test属性中直接书写表达式即可,即test=”表达式”. 第二题 解析: resource属性和url属性是必须的属性,但 ...
- 【React】345- React v16.9 新特性[译]
今天我们发布了 React 16.9.它包含了一些新特性.bug修复以及新的弃用警告,以便与筹备接下来的主要版本. 一.新弃用 重命名 Unsafe 生命周期方法 一年前,我们宣布 unsafe 生命 ...