webpack + create-react-app 構建react專案
1.肯定參考facebook關於react官網咯 快速搭建 create-react-app
npm install -g create-react-app
//切記專案名稱不能大寫
create-react-app firstapp
cd firstapp
npm run start
這樣就有初始專案了
2. 檢視專案package.json配置
2.1 package.json 一覽
{ ...... "homepage": ".", "dependencies": { "react": "^16.4.0", "react-dom": "^16.4.0", "react-scripts": "1.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } }
2.2 可用指令碼命令說明: (create-react-app官方文件都有)
- 首先說明:通過npm run 執行下面命令實際上是執行 node_modules/react-srcipt/script下對應的指令碼檔案;
- npm run start : 開始專案,通過http://localhost:3000 可訪問專案;
- npm run build : 專案打包,在生產環境中編譯程式碼,並放在build目錄中;所有程式碼將被正確打包,並進行優化、壓縮同時使用hash重新命名檔案;執行該命令前需要在package.json中新增條配置
"homepage": "."
(上面配置檔案已給出), 同時build後的專案需要在伺服器下才能訪問;否則開啟的將是空白頁面; - npm run test : 互動監視模式下啟動測試執行程式;
- npm run eject : 將隱藏的配置匯出;需要知道的是create-react-app腳手架本質上是使用react-scripts進行配置專案,所有配置檔案資訊都被隱藏起來(node_modules/react-scripts);當需要手動修改擴充套件webpack配置時有時就需要將隱藏的配置暴露出來;特別需要注意的是該操作是一個單向操作,一旦使用eject,那麼就不能恢復了(再次將配置隱藏);
3、 自動生成的專案目錄以及檔案解析:
- node_modules : 專案依賴包目錄;
public: 公共目錄,該目錄下的檔案都不會被webpack進行載入、解析、打包;通過npm run build進行打包時該專案下的所有檔案將會直接被複制到build目錄下;
- favicon.ico : 是網站圖示[可替換刪除]
- index.html: 頁面模板,webpack打包後將輸出檔案引入到該模板內;補充:index.html中通過環境變數
%PUBLIC_URL%
來指向public目錄路徑;- manifest.json: PWA將應用新增至桌面的功能的實現依賴於 manifest.json 。通過manifest.json 檔案可以對圖示、名稱等資訊進行配置。
src: 是原始碼目錄該目錄下除了index.js App.test.js registerServiceWorker.js 檔案具有一定意義其餘檔案都是演示使用可直接刪除
- index.js: 是整個專案的入口檔案;
- App.test.js: 測試單元演示檔案,暫時並不知道幹嘛用;可以直接刪除;
- registerServiceWorker.js: service worker 是在後臺執行的一個執行緒,可以用來處理離線快取、訊息推送、後臺自動更新等任務;registerServiceWorker就是為react專案註冊了一個service worker,用來做資源的快取,這樣你下次訪問時,就可以更快的獲取資源。而且因為資源被快取,所以即使在離線的情況下也可以訪問應用(此時使用的資源是之前快取的資源)。注意,registerServiceWorker註冊的service worker 只在生產環境中生效,並且該功能只有在https下才能有效果;
- .gitignore: 該檔案是github過濾檔案配置
- README.md: 該檔案是github描述檔案
- package.json: 定義了專案所需要的各種模組,以及專案的配置資訊(比如名稱、版本、許可證等元資料)。部分依賴模組被隱藏;
- yarn.lock:每次通過yarm新增依賴或者更新包版本時 yarn都會把相關版本資訊寫入yarn.lock檔案;npm也有類似功能,npm 也可以生成一個鎖檔案,就是使用上沒有yarn方便
4、 擴充套件webpack配置(以 less為例)
4.1 方法一:將 webpack 配置暴露出來並進行修改
- 暴露配置檔案:
$ npm run eject
說明: 執行eject指令碼後,專案下會新增或對部分配置檔案進行修改;專案下 script 目錄存放著指令碼檔案, config 目錄下存放著配置檔案
- 下載安裝依賴:less-loader less
$ npm install less-loader less -dev
- 修改 config 目錄下的webpack配置檔案:
// 需同時修改下面的兩個檔案:
// 開發環境下的配置檔案:webpack.config.dev.js
// 生產環境下的配置檔案:webpack.config.prod.js
// 兩個檔案的修改內容相同,對應修改內容如下(三處需要進行修改)
......
{
// 【1】修改檔案匹配正則
test: /\.(css|less)$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
// 【2】將原本數字 1 改為數字2
importLoaders: 2,
},
},
{ .... },
// 【3】新增新的載入配置物件
{
loader: require.resolve('less-loader'),
}
],
}
......
4.2 方法二:使用 react-app-rewired 對 webpack 進行自定義配置(覆蓋或新增)
- 安裝依賴包 react-app-rewired:
$ npm install react-app-rewired --save-dev
- 修改 package.json 中的指令碼命令:修改如下
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
"eject": "react-app-rewired eject"
}
- 在專案根目錄下(和 package.json 同級)新建配置檔案 config-overrides.js ,並新增如下內容
module.exports = function override(config, env) {
// 在這裡新增配置
return config;
}
- 安裝依賴包 react-app-rewire-less,通過該依賴包來實現對 less 的支援:
$ npm install react-app-rewire-less --save
說明: 這裡不再需要額外單獨安裝依賴包:less-loader less
- 修改 config-overrides.js 配置檔案,為 webpack 配置 less
const rewireLess = require('react-app-rewire-less');
module.exports = function override(config, env) {
// 只需要一條配置資訊即可實現對less的支援
config = rewireLess(config, env);
// 下面註釋用於配置loader的引數
// config = rewireLess.withLoaderOptions(someLoaderOptions)(config, env);
return config;
}
5、 在 create-react-app 中使用Antd
5.1 一般使用方法(不推薦)
- 搭建專案:
$ create-react-app demo
$ cd demo
$ npm run start
- 引入 antd 依賴包:
$ npm install npm
- 引入 antd 元件之前需要先引入 antd 樣式( 在專案入口引入所有樣式 ):
import antd/dist/antd.css
- 在專案中引入 antd 元件
import { Button } from 'antd';
5.2 按需載入
- 上面引入元件和樣式的方式,會一次性載入所有樣式並引入元件中的所有相應模組;
- 這種引入方式將會影響到應用的網路效能;
- 相應的就需要改變引入元件和樣式的方式,實現樣式和元件的按需載入;
- 下面將介紹三種按需載入元件樣式的方法:
5.2.1 方法一: 精確載入元件
import Button from 'antd/lib/button';
import 'antd/lib/button/style';
// 或者通過import antd/lib/button/style/css 進行載入樣式
5.2.2 方法二:通過暴露配置 配合 babel-plugin-import外掛實現按需載入
babel-plugin-import 是一個用於按需載入元件程式碼和樣式的 babel 外掛
- 暴露配置
$ npm run eject
- 安裝外掛:
$ npm install babel-plugin-import --save-dev
- 修改 package.json
"babel": {
"presets": [
"react-app"
],
"plugins": [
["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
]
},
- 配置完後可直接匯入 antd 的元件,不再需要另外引入css樣式;
import { Button } from 'antd';9
5.2.2 方法三:通過 babel-plugin-import + react-app-rewired實現按需載入(官網推薦)
- react-app-rewired:的使用上文有過描述;主要用於在不暴露配置的情況下對webpack的配置進行擴充套件;
- babel-plugin-import 是一個用於按需載入元件程式碼和樣式的 babel 外掛
- 安裝依賴包:babel-plugin-import
$ npm install babel-plugin-import --save-dev
- 通過 react-app-rewired 對 webpack 配置進行擴充套件新增新的babel外掛,config-overrides.js 修改 ( 新增 ) 如下內容:
// 引入 react-app-rewired 新增 babel 外掛的函式
const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
config = injectBabelPlugin(['import',
{ libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], config);
return config;
};
- 配置完後可直接匯入 antd 的元件,不再需要另外引入css樣式;
import { Button } from 'antd';9
5.3 通過 react-app-rewired 擴充套件 webpack 來實現 antd 自定義主題
主要通過利用了 less-loader 的 modifyVars 引數來進行主題配置
- 安裝配置:react-app-rewired (上文已經詳細介紹過這裡就不再細說)
- 安裝依賴包 react-app-rewire-less :實現對 less 的支援同時新增 modifyVars 載入引數設定
$ npm react-app-rewire-less --save-dev
- 修改 config-overrides.js 配置檔案
const rewireLess = require('react-app-rewire-less');
const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
// 擴充套件 webpack ==> 支援less
config = rewireLess(config, env);
// 配置loader引數
config = rewireLess.withLoaderOptions({
// 修改預設顏色 實現自定義主題
modifyVars: { "@primary-color": "#1DA57A" },
})(config, env);
// antd 按需載入配置
config = injectBabelPlugin(['import',
{ libraryName: 'antd', libraryDirectory: 'es', style: true }], config);
return config;
}
5.4 通過外掛 babel-plugin-transform-decorators-legacy 實現對修飾器的支援
5.4.1 通過暴露配置實現
- 暴露配置
$ npm run eject
- 安裝外掛:
$ npm install --save-dev babel-plugin-transform-decorators-legacy
- 修改 package.json
"babel": {
"presets": [
"react-app"
],
"plugins": [
["transform-decorators-legacy"]
]
},
5.4.2 使用外掛 react-app-rewired 對配置進行擴充套件實現對修飾器的支援
- react-app-rewired 的使用詳見上文:
- 安裝外掛:
$ npm install --save-dev babel-plugin-transform-decorators-legacy
- 編寫 config-overrides.js 配置檔案
// 匯入新增babel外掛的函式
const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
// do stuff with the webpack config...
// 修飾器擴充套件 (新增babel外掛:transform-decorators-legacy )
config = injectBabelPlugin('transform-decorators-legacy', config)
return config;
};
6、 常見問題:
6.1 通過 react-app-rewired 進行擴充套件配置時 發現啟動專案後並沒有效果?
- 在確保一起配置沒有問題下:
- 請確認是否有對指令碼命令進行了正確的修改,使用react-app-rewired 擴充套件配置需要修改指令碼命令
{
....
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
"eject": "react-app-rewired eject"
},
...
}