成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

react項(xiàng)目關(guān)于webpack配置修改

社區(qū)管理員 / 1627人閱讀

一、前言

通過(guò)CRA腳手架構(gòu)建的項(xiàng)目，一般webpack配置是隱藏的，如果要修改，就要另外處理。

想要修改webpack通常有兩種方式

  • 通過(guò)插件去增加或覆蓋webpack配置（方法一、方法二）

  • 或者釋放項(xiàng)目中的webpack配置，使之可見(jiàn)，然后可以修改（方法三）

本來(lái)CRA腳手架將webpack等復(fù)雜的配置封裝在項(xiàng)目中，后續(xù)可以通過(guò)更新react-scripts來(lái)體驗(yàn)版本升級(jí)帶來(lái)的新特性，但有些時(shí)候確實(shí)需要我們修改webpack配置，適應(yīng)項(xiàng)目的需要，所以我們一般選擇通過(guò)插件覆蓋webpack配置，當(dāng)然也可以完全放開(kāi)配置。

以下幾種常見(jiàn)的方式有：

二、利用react-app-rewired修改或覆蓋配置（推薦）

1、下載插件、依賴(lài)

yarn add react-app-rewired customize-cra babel-plugin-import -D 復(fù)制代碼

2、修改package.json

{   "scripts": {     "start": "react-app-rewired start",     "build": "react-app-rewired build",     "test": "react-app-rewired test",     "eject": "react-scripts eject"   } } 復(fù)制代碼

3、在項(xiàng)目根目錄下新建文件config-overrides.js

const { override, fixBabelImports, addLessLoader } = require("customize-cra"); module.exports = override(     fixBabelImports("import", {         libraryName: 'antd',         libraryDirectory: "es",         style: true     }),     addLessLoader({         javascriptEnabled: true     }) ); 復(fù)制代碼

這里配置webpack支持less語(yǔ)法，可以看到這里與通常配置的webpack不太一樣，詳細(xì)配置可以看react-app-rewired官方文檔

App.css和index.css修改為App.less和index.less

然后在項(xiàng)目中引入，發(fā)現(xiàn)項(xiàng)目運(yùn)行正常

三、利用插件@craco/craco修改或覆蓋配置

1、安裝插件、依賴(lài)

yarn add @craco/craco craco-less @babel/plugin-proposal-decorators babel-plugin-import -D 復(fù)制代碼

2、在根目錄下新建craco.config.js

const 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ù)制代碼

image.png

這里同時(shí)展示下引入插件的方法@babel/plugin-proposal-decorators

@craco/craco參考文檔

四、完全編譯webpack到項(xiàng)目中

1、釋放webpack配置

下載好的項(xiàng)目，在package.json中可以看到這樣的腳本

{   "scripts": {     "eject": "react-scripts eject"   } } 復(fù)制代碼

執(zhí)行yarn eject, 將封裝的webpack配置編譯到項(xiàng)目中，這樣可以獲取webpack的全部配置，自行修改。

cd fronted-demo yarn eject 復(fù)制代碼

可以看到fronted-demo項(xiàng)目目錄下新增了很多的文件，這些文件都是webpack的配置，可以修改任意的配置，但也導(dǎo)致項(xiàng)目文件驟增，并且該過(guò)程不可逆。

主要的配置放在config文件中

image.png

這就和webpack原始的配置一樣了，

2、配置less-loader

image.png

這里配置引入less-loader

image.png

在config/webpack.config.js下module/rules下添加該配置，然后在項(xiàng)目中添加common.less文件

.color-red {     color: red } 復(fù)制代碼

在index.tsx文件中

import "./common.less" <div className="color-red">test</div> 復(fù)制代碼

運(yùn)行后發(fā)現(xiàn)

image.png

3、注意

  • 1、less-loader 版本不能超過(guò)6.0.0，超過(guò)了寫(xiě)法不一樣，會(huì)報(bào)錯(cuò)，這是因?yàn)楦甙姹镜?code>less-loader語(yǔ)法變了，需要寫(xiě)新的格式。

TypeError: this.getOptions is not a function

image.png

  • 2、注意這兩行配置，less-loader要寫(xiě)在file-loader前才能生效

image.png

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/127957.html

相關(guān)文章

  • 手把手教你從零搭建react局部熱加載環(huán)境

    摘要：有沒(méi)有辦法實(shí)現(xiàn)就局部刷新呢當(dāng)然是有第十步執(zhí)行為了實(shí)現(xiàn)局部熱加載，我們需要添加插件。 前言 用了3個(gè)多月的vue自認(rèn)為已經(jīng)是一名合格的vue框架api搬運(yùn)工，對(duì)于vue的api使用到達(dá)了一定瓶頸，無(wú)奈水平有限，每每深入底層觀賞源碼時(shí)候都迷失了自己。 遂決定再找個(gè)框架學(xué)習(xí)學(xué)習(xí)看看能否突破思維局限，加上本人早已對(duì)React、RN技術(shù)垂涎已久,于是決定找找教程來(lái)學(xué)習(xí)。無(wú)奈第一步就卡在了環(huán)境搭...

    quietin 評(píng)論0 收藏0

  • react+react-router4+redux最新版構(gòu)建分享

    摘要：相關(guān)配置請(qǐng)參考中文文檔。關(guān)于的更多使用方法及理解需要詳細(xì)具體講解，涉及篇幅較大，本文暫不涉及，有興趣可以看文檔中文文檔，我會(huì)整理后再單獨(dú)章節(jié)分享接下來(lái)我們將編寫(xiě)路由組件這與有一些差別，原來(lái)的方法已經(jīng)不再使用，在中或組件從中引入。 ??????相信很多剛?cè)肟覴eact的小伙伴們有一個(gè)同樣的疑惑，由于React相關(guān)庫(kù)不斷的再進(jìn)行版本迭代，網(wǎng)上很多以前的技術(shù)分享變得不再適用。比如react-...

    weapon 評(píng)論0 收藏0

  • 記一次基于react、cra2、typescript的pwa項(xiàng)目由開(kāi)發(fā)到部署（二）

    摘要：在上一篇文章記一次基于的項(xiàng)目由開(kāi)發(fā)到部署一中，我們了解到了給我們提供了哪些支持，也了解到了有哪些不足。項(xiàng)目回顧這是一個(gè)移動(dòng)端的應(yīng)用，使用，，，，基于開(kāi)發(fā)?？梢蕴砑拥街髌聊?，可以斷網(wǎng)條件下正常打開(kāi)和訪問(wèn)數(shù)據(jù)。 在上一篇文章記一次基于react、cra2、typescript的pwa項(xiàng)目由開(kāi)發(fā)到部署（一）中，我們了解到了create-react-app 給我們提供了哪些pwa支持，也了解到...

    Prasanta 評(píng)論0 收藏0

  • 手把手教你用React實(shí)現(xiàn)一個(gè)簡(jiǎn)單的個(gè)人博客

    摘要：官方文檔中文文檔基本使用注意一定要在根目錄的中聲明，要不然點(diǎn)擊任何鏈接都無(wú)法跳轉(zhuǎn)。官方文檔中文文檔簡(jiǎn)單的來(lái)說(shuō)，每一次的修改狀態(tài)都需要觸發(fā)，然而其實(shí)項(xiàng)目中我現(xiàn)在還沒(méi)用到修改數(shù)據(jù)。。。 學(xué)習(xí) React 的過(guò)程中實(shí)現(xiàn)了一個(gè)個(gè)人主頁(yè)，沒(méi)有復(fù)雜的實(shí)現(xiàn)和操作，適合入門(mén) ~ 原文地址：https://github.com/axuebin/react-blog/issues/17 這個(gè)項(xiàng)目其實(shí)功能...

    zhaochunqi 評(píng)論0 收藏0

  • Webpack 3一些代碼體積優(yōu)化方案的小結(jié)

    摘要：表示生成一個(gè)懶加載的，只有當(dāng)需要時(shí)才會(huì)被加載。主要是作用域提升，將所有模塊放在同一個(gè)作用域當(dāng)中，一方面能提高運(yùn)行速度，另一方面也能降低文件體積。前提是你的代碼是用模塊寫(xiě)的。參考文章學(xué)習(xí)小結(jié) 前言 之前接手公司一個(gè)前端項(xiàng)目，開(kāi)發(fā)了幾個(gè)月后越來(lái)越難以忍受項(xiàng)目結(jié)構(gòu)的混亂和打包體積的臃腫（腳手架和基本功能代碼都是從公司的其他項(xiàng)目復(fù)制過(guò)來(lái)的），如果不立即進(jìn)行重構(gòu)，難以想象以后要怎么維護(hù)各個(gè)產(chǎn)品線...

    taowen 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<