告別webpack react 搭建多頁面之痛

seanHai 發布于2019-08-23 15:25 / 1515人閱讀

摘要：搭建多頁面應用在往下看之前請確保先上個涼的吃著目錄結構編譯結果配置文件腳本存放處項目開發中一些常用的方法主要存放和請求有關的靜態文件模版文件項目開發中一些常用的方法其實我覺得可以和放在一塊，但是個人習慣還是分開啦開始擼代碼如何創建多頁面應用

webpack4 搭建 react 多頁面應用

在往下看之前請確保nodejs > 8.X

先上個涼的吃著

目錄結構

.
├── dist                   # 編譯結果
├── build                  # 配置文件
├── cli                    # sh腳本存放處
├── src                    # 
    ├── assets             # Store images, icons, ...
    ├── public             # UI components
    ├── services           # 項目開發中一些常用的方法 主要存放和請求有關的
    ├── statics            # 靜態文件
    ├── template           # 模版文件
    ├── utils              # 項目開發中一些常用的方法 其實我覺得可以和services 放在一塊，但是個人習慣還是分開啦
    └── views              # pages
├── .eslintrc              # Eslint config
├── .babelrc               # babel config
├── .gitignore             #
└── package.json           #

開始擼代碼

如何創建多頁面應用，首先你需要先有一個單頁面應用進行改裝，這里我就不再敲單頁面應用的案例啦～git上有demo，接下來的多頁面也是基于上述單頁面改裝

開始大工程
開箱即用react 多頁面
上面是多頁面應用的demo 喜歡的請給個star

在這不多說～只給大家說一下一些想法和注意點

單改多 === 大家都知道就是將入口改成多個，但是具體怎么實現？

demo中/build/pageEntry.js 文件就是專門處理多入口多頁面的，我們借助glob 這個node 模型來獲取入口文件 glob

獲取完所有的目標文件接下來就是循環將所有的文件拼到入口上去啦（多頁面頁面配置的配置也是相同的道理）記得將webpack.base.config.js、webpack.dev.config.js、webpack.prod.config.js下面對應的代碼

到此為止基本一個簡單的多頁面應用已經完成啦，但是現在這樣的代碼并不能滿足我們日常的開發，因為這樣的話我們每一次的開發都要在src/views/下面去創建一個文件夾，然后一個一個的創建文件，哇～想想都好惡心，如果我要是這樣直接給我同事去用，我相信他們會罵死我～好～為了不讓隊友罵，那我就想想怎么讓他們一鍵生成

借助shelljs模塊來簡化模版的創建

請移步到demo中cli文件夾下面的createHtml.sh

首先我們先在src/template下面建一個通用的模版

然后就是就是寫一個腳本實現指令執行的時候把template復制到對應的文件夾下面就可以啦～本項目中使用 npm run cli-create 來創建開發界面

嗯嗯～現在隊友們不罵我啦～哈哈哈

結果用了沒幾天，隊友又開始抱怨啦～需求多啦～頁面多啦，所以每回啟動項目的時候所有的界面都會啟動，可是每回我只調試某一個頁面，不需要啟動這么多～怎么辦怎么辦怎么辦～好吧～那就干唄，還能怎么辦

請移步到demo中build文件夾下面的selectPage.js 文件好吧～不知道咋說～大家自己看吧

現在基本上多頁面的應用大部分主要用于原生應用內嵌H5頁面，所以這就涉及到native和H5的通信和H5頁面在移動端的調試問題啦

native和H5的通信可以查看JSBridge

H5頁面在移動端的調試我在項目中引用的是eruda.js（用的時候別忘了在production環境要禁用哦！）

最后一點，移動端的適配demo中用的是vw，不過實際開發中你可以直接去寫px；px轉vw也已做好，關于vw的移動端適配大家可以google一下～

總結語～

在放一遍demo鏈接吧，喜歡個可以給個星星，灰常感謝，接下來會繼續優化，啟動之后可以選擇打開某一個界面，也不需要手動去輸入文件地址啦～哈哈哈～期待的話給star吧

云服務器 GPU云服務器 webpack搭建多頁面多頁面應用多頁面web

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/102032.html

告別繁瑣重復的webpack配置，直接上手擼代碼

摘要：也就是說，和是兩個相互獨立的處理單元。那么這樣給我們帶來什么便利呢如果中出錯，在中是不被察覺的。后面加入的入口，不影響入口，所以之前對的是依然生效的。只需要執行，就可以直接看到啦預覽效果預覽愛奇藝效果預覽最后，歡迎各位大家伙有沒有這么一個煩惱：想寫一些簡單的前端Demo，卻被繁瑣的webpack配置給惡心到?于是乎便有了go-js的存在，我們只需要執行全局安裝go-js，執行goj...

gghyoo 2019-08-21 18:36 評論0 收藏0
3月份前端資源分享

摘要：面試如何防騙一份優秀的前端開發工程師簡歷是怎么樣的作為，有哪些一般人我都告訴他，但是他都不聽的忠告如何面試前端工程師更多資源請Star：https://github.com/maidishike... 文章轉自：https://github.com/jsfront/mo... 3月份前端資源分享 1. Javascript 使用judge.js做信息判斷 javascript...

nanchen2251 2019-08-21 15:21 評論0 收藏0
webpack4 + react 搭建多頁面應用

摘要：升級到之后還沒好好的同步一個可實用的架子，接下來用來搭建一個簡單的的多界面應用，廢話不說直接擼碼創建工程目錄結構工程目錄結構配置安裝依賴引入打開瀏覽器配置文件合并基礎配置一些路徑配置設置開發環境 webpack 升級到4之后還沒好好的同步一個可實用的webpack架子，接下來用webpack4來搭建一個簡單的react的多界面應用，廢話不說直接擼碼創建工程 $ mkdir dem...

nifhlheimr 2019-08-29 16:15 評論0 收藏0
webpack4 + react 搭建多頁面應用

摘要：升級到之后還沒好好的同步一個可實用的架子，接下來用來搭建一個簡單的的多界面應用，廢話不說直接擼碼創建工程目錄結構工程目錄結構配置安裝依賴引入打開瀏覽器配置文件合并基礎配置一些路徑配置設置開發環境 webpack 升級到4之后還沒好好的同步一個可實用的webpack架子，接下來用webpack4來搭建一個簡單的react的多界面應用，廢話不說直接擼碼創建工程 $ mkdir dem...

wushuiyong 2019-08-23 10:37 評論0 收藏0