資訊專欄INFORMATION COLUMN
通過CRA腳手架構(gòu)建的項目，一般webpack配置是隱藏的，如果要修改，就要另外處理。
想要修改webpack通常有兩種方式
通過插件去增加或覆蓋webpack配置（方法一、方法二）
或者釋放項目中的webpack配置，使之可見，然后可以修改（方法三）
本來CRA腳手架將webpack等復(fù)雜的配置封裝在項目中，后續(xù)可以通過更新react-scripts來體驗版本升級帶來的新特性，但有些時候確實需要我們修改webpack配置，適應(yīng)項目的需要，所以我們一般選擇通過插件覆蓋webpack配置，當(dāng)然也可以完全放開配置。
以下幾種常見的方式有：
react-app-rewired修改或覆蓋配置（推薦）yarn add react-app-rewired customize-cra babel-plugin-import -D 復(fù)制代碼
package.json{ "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-scripts eject" } } 復(fù)制代碼config-overrides.jsconst { override, fixBabelImports, addLessLoader } = require("customize-cra"); module.exports = override( fixBabelImports("import", { libraryName: 'antd', libraryDirectory: "es", style: true }), addLessLoader({ javascriptEnabled: true }) ); 復(fù)制代碼這里配置webpack支持less語法，可以看到這里與通常配置的webpack不太一樣，詳細(xì)配置可以看react-app-rewired官方文檔
App.css和index.css修改為App.less和index.less
然后在項目中引入，發(fā)現(xiàn)項目運行正常
@craco/craco修改或覆蓋配置yarn add @craco/craco craco-less @babel/plugin-proposal-decorators babel-plugin-import -D 復(fù)制代碼
craco.config.jsconst CracoLessPlugin = require("craco-less") const path = require('path') const pathResolve = pathUrl => path.join(__dirname, pathUrl) module.exports = { webpack: { alias: { '@': pathResolve('src') } }, babel: { plugins: [ ['@babel/plugin-proposal-decorators', { legacy: true }] ] }, plugins: [ { plugin: CracoLessPlugin, options: { lessLoaderOptions: { lessOptions: { modifyVars: {}, javascriptEnabled: true } } } } ] } 復(fù)制代碼這里配置引入的別名 '@'，具體使用
在src下新建目錄pages/index.js
export const DATA = "test" 復(fù)制代碼
這里同時展示下引入插件的方法@babel/plugin-proposal-decorators
下載好的項目，在package.json中可以看到這樣的腳本
{ "scripts": { "eject": "react-scripts eject" } } 復(fù)制代碼執(zhí)行yarn eject, 將封裝的webpack配置編譯到項目中，這樣可以獲取webpack的全部配置，自行修改。
cd fronted-demo yarn eject 復(fù)制代碼
可以看到fronted-demo項目目錄下新增了很多的文件，這些文件都是webpack的配置，可以修改任意的配置，但也導(dǎo)致項目文件驟增，并且該過程不可逆。
主要的配置放在config文件中
這就和webpack原始的配置一樣了，
less-loader這里配置引入less-loader
在config/webpack.config.js下module/rules下添加該配置，然后在項目中添加common.less文件
.color-red { color: red } 復(fù)制代碼在index.tsx文件中
import "./common.less" <div className="color-red">test</div> 復(fù)制代碼
運行后發(fā)現(xiàn)
1、less-loader 版本不能超過6.0.0，超過了寫法不一樣，會報錯，這是因為高版本的less-loader語法變了，需要寫新的格式。
TypeError: this.getOptions is not a function
2、注意這兩行配置，less-loader要寫在file-loader前才能生效
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/127957.html
摘要：有沒有辦法實現(xiàn)就局部刷新呢當(dāng)然是有第十步執(zhí)行為了實現(xiàn)局部熱加載，我們需要添加插件。 前言 用了3個多月的vue自認(rèn)為已經(jīng)是一名合格的vue框架api搬運工，對于vue的api使用到達(dá)了一定瓶頸，無奈水平有限，每每深入底層觀賞源碼時候都迷失了自己。 遂決定再找個框架學(xué)習(xí)學(xué)習(xí)看看能否突破思維局限，加上本人早已對React、RN技術(shù)垂涎已久,于是決定找找教程來學(xué)習(xí)。無奈第一步就卡在了環(huán)境搭...
摘要：相關(guān)配置請參考中文文檔。關(guān)于的更多使用方法及理解需要詳細(xì)具體講解，涉及篇幅較大，本文暫不涉及，有興趣可以看文檔中文文檔，我會整理后再單獨章節(jié)分享接下來我們將編寫路由組件這與有一些差別，原來的方法已經(jīng)不再使用，在中或組件從中引入。 ??????相信很多剛?cè)肟覴eact的小伙伴們有一個同樣的疑惑，由于React相關(guān)庫不斷的再進(jìn)行版本迭代，網(wǎng)上很多以前的技術(shù)分享變得不再適用。比如react-...
摘要：在上一篇文章記一次基于的項目由開發(fā)到部署一中，我們了解到了給我們提供了哪些支持，也了解到了有哪些不足。項目回顧這是一個移動端的應(yīng)用，使用，，，，基于開發(fā)。可以添加到主屏幕，可以斷網(wǎng)條件下正常打開和訪問數(shù)據(jù)。 在上一篇文章記一次基于react、cra2、typescript的pwa項目由開發(fā)到部署（一）中，我們了解到了create-react-app 給我們提供了哪些pwa支持，也了解到...
摘要：官方文檔中文文檔基本使用注意一定要在根目錄的中聲明，要不然點擊任何鏈接都無法跳轉(zhuǎn)。官方文檔中文文檔簡單的來說，每一次的修改狀態(tài)都需要觸發(fā)，然而其實項目中我現(xiàn)在還沒用到修改數(shù)據(jù)。。。 學(xué)習(xí) React 的過程中實現(xiàn)了一個個人主頁，沒有復(fù)雜的實現(xiàn)和操作，適合入門 ~ 原文地址：https://github.com/axuebin/react-blog/issues/17 這個項目其實功能...
摘要：表示生成一個懶加載的，只有當(dāng)需要時才會被加載。主要是作用域提升，將所有模塊放在同一個作用域當(dāng)中，一方面能提高運行速度，另一方面也能降低文件體積。前提是你的代碼是用模塊寫的。參考文章學(xué)習(xí)小結(jié) 前言 之前接手公司一個前端項目，開發(fā)了幾個月后越來越難以忍受項目結(jié)構(gòu)的混亂和打包體積的臃腫（腳手架和基本功能代碼都是從公司的其他項目復(fù)制過來的），如果不立即進(jìn)行重構(gòu)，難以想象以后要怎么維護各個產(chǎn)品線...
閱讀 289·2024-11-07 18:25
閱讀 130366·2024-02-01 10:43
閱讀 868·2024-01-31 14:58
閱讀 828·2024-01-31 14:54
閱讀 82766·2024-01-29 17:11
閱讀 3048·2024-01-25 14:55
閱讀 1985·2023-06-02 13:36
閱讀 3033·2023-05-23 10:26
