react-app-rewired 擴展webpack的方法
npm install react-app-rewired --save-dev
// 或者
yarn add react-app-rewired
/* 修改package.json */
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test --env=jsdom",
+ "test": "react-app-rewired test --env=jsdom",
- "eject": "react-scripts eject"
}
文檔https://github.com/timarney/react-app-rewired/blob/HEAD/README_zh.md
安裝customize-cra
npm install customize-cra --save-dev
react項目中我們最常用的組件庫antd，我們需要配置按需加載。
使用babel-plugin-import，它是一個用於按需加載組件代碼和樣式的 babel 插件。
npm install babel-plugin-import --save-dev
或者
yarn add babel-plugin-import
支持裝飾器
const { override, addDecoratorsLegacy } = require("customize-cra");
module.exports = override(
addDecoratorsLegacy()
);
配置webpack
/* config-overrides.js */
const { override, fixBabelImports, addDecoratorsLegacy} = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css',
}),
addDecoratorsLegacy()
);
在組件中就可以按需引入組件庫中所需要的組件了。
安裝 postcss-pxtorem
npm install postcss-pxtorem --save
config-overrides.js,添加代碼：
/**
* [description]
* 使用過create-react-app（以下簡稱cra）的朋友都知道，這是react官方的一款腳手架工具，
* 使用過內部集成了使用react-app-rewired,使用此插件可以暴露出webpack
* 但是！react-app-rewired2.x以後，不再支持injectBabelPlugin的方式，需要安裝customize-cra。
* npm install customize-cra --save-dev 或者 yarn add customize-cra --dev
* 所以新建config-overrides.js可以讀取到該文件
*/
const { override, fixBabelImports,addPostcssPlugins } = require('customize-cra');
/**
* [關閉打包後的sourcemap description]
* [打包後我們會發現靜態文件夾中會有很多的css和js的map文件，關閉sourcemap]
*/
// process.env.GENERATE_SOURCEMAP = "false";
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd-mobile',
style: 'css',
}),
addPostcssPlugins([require('postcss-pxtorem')({
rootValue: 16,
propList: ['*']
// propList: ['*', '!border*', '!font-size*', '!letter-spacing'],
// propWhiteList: []
}),])
/**
* [安裝less]
* npm i less
* npm i -D less-loader
*/
// addLessLoader({
// javascriptEnabled: true,
// modifyVars: { '@primary-color': '#1DA57A' },
// }),
/**
* [remUnit description]
* npm install lib-flexible --save
* flexible會爲頁面根據屏幕自動添加<meta name='viewport' >標籤，
* 動態控制initial-scale，maximum-scale，minimum-scale等屬性的值。
* 安裝完成之後再入口index.js頁面 import lib-flexible
* 注意事項（important）: 由於flexible會動態給頁面header中添加<meta name='viewport' >標籤，
* 所以務必請把目錄 public/index.html 中的這個標籤刪除！！！
*/
/**
* [postcss-px2rem]
* npm install postcss-px2rem --save
* postcss-px2rem會將px轉換爲rem，rem單位用於適配不同寬度的屏幕，
* 根據<html>標籤的font-size值來計算出結果，1rem=html標籤的font-size值。
*/
// addPostcssPlugins([
// require("postcss-px2rem")({ remUnit: 37.5 })
// ])
/**
* [description]
* 溫馨提示： remUnit這個配置項的數值是多少呢？？？ 通常我們是根據設計圖來定這個值，原因很簡單，便於開發。
* 假如設計圖給的寬度是750，我們通常就會把remUnit設置爲75，這樣我們寫樣式時，可以直接按照設計圖標註的寬高來1:1還原開發。
* 那爲什麼你在這裏寫成了37.5呢？？？那我們後面專門來講！
* 之所以設爲37.5，是爲了引用像mint-ui這樣的第三方UI框架，因爲第三方框架沒有兼容px2rem ，
* 將remUnit的值設置爲設計圖寬度（這裏爲750px）75的一半，即可以1:1還原mint-ui的組件，否則會樣式會有變化，例如按鈕會變小。
* 既然設置成了37.5 那麼我們必須在寫樣式時，也將值改爲設計圖的一半。
*/
);
新建rem.js文件
const baseSize = 32
// 設置 rem 函數
function setRem () {
// 當前頁面寬度相對於 750 寬的縮放比例，可根據自己需要修改。
const scale = document.documentElement.clientWidth / 750
// 設置頁面根節點字體大小
document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改變窗口大小時重新設置 rem
window.onresize = function () {
setRem()
}
在src目錄下的index.js引入rem.js
前端本地proxy的配置
在src目錄下新建文件setupProxy.js（注意文件名一定要是這個名字，不要問什麼，cra現在廢棄了proxy對象配置的方式，將其作爲單獨模塊。解析就是按 src/setupProxy.js這個路徑）
安裝http代理相關包http-proxy-middleware
npm install http-proxy-middleware --save-dev
或者
yarn add http-proxy-middleware -D
配置如下
const proxy = require('http-proxy-middleware')
module.exports = function(app) {
app.use(
proxy('/api', {
target: 'http://xx.xx.xx.xx:8000/',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
})
)
}