當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

webpack+react多页面开发架构

發(fā)布時(shí)間：2025/6/17 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 webpack+react多页面开发架构小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

項(xiàng)目已經(jīng)升級(jí)為最新版本參考react-multi-page-app

webpack在單頁(yè)面打包上應(yīng)用廣泛，以create-react-app為首的腳手架眾多，單頁(yè)面打包通常指的是將業(yè)務(wù)js，css打包到同一個(gè)html文件中，整個(gè)項(xiàng)目只有一個(gè)html文件入口,但也有許多業(yè)務(wù)需要多個(gè)頁(yè)面不同的入口，比如不同的h5活動(dòng)，或者需要支持seo的官方網(wǎng)站，都需要多個(gè)不同的html。webpack-react-multi-page架構(gòu)讓你可以在多頁(yè)面在項(xiàng)目開發(fā)中自動(dòng)化打包新創(chuàng)建頁(yè)面并保證每個(gè)頁(yè)面都可以熱更新 ，build打包后有清晰的文件層次結(jié)構(gòu)。

概覽

keyvalue

名稱	webpack+react多頁(yè)面架構(gòu)
描述	簡(jiǎn)單易用的多頁(yè)面自動(dòng)化開發(fā)架構(gòu)
開發(fā)者	leinov
發(fā)布日期	2018-11-07
版本	2.0
倉(cāng)庫(kù)	github地址

特性

??????? 支持多頁(yè)面同時(shí)熱加載開發(fā)
? 自動(dòng)識(shí)別新創(chuàng)建頁(yè)面
? 每個(gè)頁(yè)面生成個(gè)性化信息
? 分類打包
? 靈活擴(kuò)展

安裝&使用

// clone git clone git@github.com:leinov/react-multi-page-app.git// 安裝依賴包 npm install// 開發(fā) npm run dev// 編譯打包 npm run build// 啟動(dòng)生產(chǎn)頁(yè)面 npm start

新創(chuàng)建頁(yè)面在src下添加文件夾并創(chuàng)建pageinfo.json 然后npm run dev 即可

項(xiàng)目架構(gòu)

技術(shù)使用

react16
webpack4
- html-webpack-plugin 生成html文件
- mini-css-extract-plugin css分離打包
- uglifyjs-webpack-plugin js壓縮
- optimize-css-assets-webpack-plugin css壓縮
es6
babel
node
- opn 打開瀏覽器
- compression 開啟gzip壓縮
- express
- fs
git

目錄結(jié)構(gòu)

wiki

webpack打包單頁(yè)面應(yīng)用

webpack在單頁(yè)面打包上應(yīng)用廣泛，以create-react-app為首的接觸腳手架眾多，單頁(yè)面打包通常指的是將業(yè)務(wù)js，css打包到同一個(gè)html文件中，整個(gè)項(xiàng)目只有一個(gè)html文件入口

webpack單頁(yè)面打包配置

webpack.config.js

module.exports = (env, argv) => ({entry: ".src/index.js",output: {path: path.join(__dirname, "dist"),filename: "bundle.js"},module: {rules: [...],},plugins: [new HtmlWebpackPlugin({title: "首頁(yè)",filename:"index.html",favicon:"",template: "./src/template.html",})] });

這樣就可以在dist文件夾下打包出一個(gè)下面這樣的文件

<!DOCTYPE html> <html lang="en"><head><title>首頁(yè)</title><body><div id="root"></div><script type="text/javascript" src="bundle.js"></script></body> </html>

webpack多頁(yè)面打包配置

webpack 的entry支持兩種種格式

打包單個(gè)文件

module.exports = {entry: '.src/file.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'bundle.js'} };

這樣就會(huì)在dist下打包出一個(gè)bundle.js

打包出多個(gè)文件

module.exports = {entry: {index:"./src/index.js",about:"./src/about.js"},output: {path: path.resolve(__dirname, 'dist'),filename: '[name].js' index.js,about.js這兩個(gè)文件} };

上面在dist下打包出兩個(gè)與entry屬性名對(duì)應(yīng)的js文件

將每個(gè)js掛載到相應(yīng)的html文件上

這里我們需要用到html-webpack-plugin這個(gè)webpack插件,每添加一個(gè)頁(yè)面就需要在plugins添加一個(gè)new HtmlWebpackPlugin({....})

const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = (env, argv) => ({entry: {index:"./src/index.js",about:"./src/about.js"},output: {path: path.resolve(__dirname, 'dist'),filename: '[name].js' index.js,about.js這兩個(gè)文件}....//其他配置plugins: [new HtmlWebpackPlugin({filename:"index.html",//生成的index.htmltemplate: "./src/template.html",}) //模板chunks:["index"]}),new HtmlWebpackPlugin({filename:"about.html",//生成的index.htmltemplate: "./src/template.html",}) //模板chunks:["index"]})] })

html-webpack-plugin 會(huì)通過 template.html 模板生成對(duì)應(yīng)的filename名的html文件，并一并打包到output中對(duì)應(yīng)的文件夾下，注意，在沒有特殊配置的情況下所有打包的文件都是對(duì)應(yīng)到output中 path 這個(gè)目錄下，也包括html。這里的 chunks 需要注意，它是確定該html需要引入哪個(gè)js，如果沒寫的話，默認(rèn)會(huì)引出所有打包的js，當(dāng)然這不是我們想要的。

上面的配置最終可以在dist下打包出下面的文件結(jié)構(gòu)

通過上面這樣的配置，再加上devServer，我們已經(jīng)可以實(shí)現(xiàn)多頁(yè)面的配置開發(fā)了，但這樣很不智能，因?yàn)槟忝吭黾右粋€(gè)頁(yè)面，就要在wepback里面配置一次，會(huì)非常繁瑣，所以我們來優(yōu)化下，讓我們只專注于開發(fā)頁(yè)面，配置交給webpack自己.

webpack多頁(yè)面配置優(yōu)化

我們?cè)倏聪聅rc下面的文件結(jié)構(gòu)

src下面每個(gè)文件夾對(duì)應(yīng)一個(gè)html頁(yè)面的js業(yè)務(wù)，如果我們直接把文件夾對(duì)應(yīng)入口js找到并把他們合并生成對(duì)應(yīng)的entry，那是不是就不用手動(dòng)寫entry了呢，是的!

遍歷文件目錄

/* eslint-env node *//*** @file: getFilePath.js 遍歷文件目錄* @author: leinov* @date: 2018-10-11*/const fs = require("fs");/*** 【遍歷某文件下的文件目錄】** @param {String} path 路徑* @returns {Array} ["about","index"]*/ module.exports = function getFilePath(path){let fileArr = [];let existpath = fs.existsSync(path); //是否存在目錄if(existpath){let readdirSync = fs.readdirSync(path); //獲取目錄下所有文件readdirSync.map((item)=>{let currentPath = path + "/" + item;let isDirector = fs.statSync(currentPath).isDirectory(); //判斷是不是一個(gè)文件夾if(isDirector && item !== "component"){ // component目錄下為組件需要排除fileArr.push(item);}});return fileArr;} };

比如在src下有index頁(yè)面項(xiàng)目，about項(xiàng)目遍歷結(jié)果為["index","about"];

遍歷生成打包入口數(shù)組

/* eslint-env node */ /*** @file: getEntry.js 獲取entry文件入口* @author: leinov* @date: 2018-10-11* @update: 2018-11-04 優(yōu)化入口方法調(diào)用getFilePath*/ const getFilePath = require("./getFilepath"); /*** 【獲取entry文件入口】** @param {String} path 引入根路徑* @returns {Object} 返回的entry { "about/aoubt":"./src/about/about.js",...}*/ module.exports = function getEnty(path){let entry = {};getFilePath(path).map((item)=>{/*** 下面輸出格式為{"about/about":"./src/aobout/index.js"}* 這樣目的是為了將js打包到對(duì)應(yīng)的文件夾下*/entry[`${item}/${item}`] = `${path}/${item}/index.js`;});return entry; };

這里我們使用getFilepath獲取的數(shù)組，在獲取到每個(gè)目錄下的js文件，組合成一個(gè)js入口文件的如下格式的對(duì)象。

{"index/index":"./src/index/index.js","about/about":"./src/about/index.js" }

在webpack中使用getEntry

const getEntry = require("./webpackConfig/getEntry"); const entry = getEntry();module.exports = (env, argv) => ({entry: entry, })

這樣我們就自動(dòng)獲取到了entry

html-webpack-plugin自動(dòng)配置

因?yàn)槊總€(gè)頁(yè)面都需要配置一個(gè)html，而且每個(gè)頁(yè)面的標(biāo)題，關(guān)鍵字，描述等信息可能不同，所以我們?cè)诿總€(gè)頁(yè)面文件夾下創(chuàng)建一個(gè)pageinfo.json,通過fs模塊獲取到j(luò)son里信息再遍歷到對(duì)應(yīng)得html-webpack-plugin中生成一個(gè)html插件數(shù)組。

index/pageinfo.json 生成index.html頁(yè)面信息

{"title":"首頁(yè)","keywords":"webpack多頁(yè)面" }

about/pageinfo.json 生成about.html頁(yè)面信息供

{"title":"關(guān)于頁(yè)面","keywords":"webpack多頁(yè)面關(guān)于頁(yè)面" }

通過fs遍歷讀取并生成HtmlWebpackPlugin數(shù)組供webpack使用

遍歷html插件數(shù)組

/*** @file htmlconfig.js 頁(yè)面html配置* @author:leinov* @date: 2018-10-09* @update: 2018-11-05* @use: 動(dòng)態(tài)配置html頁(yè)面，獲取src下每個(gè)文件下的pageinfo.json內(nèi)容,解析到HtmlWebpackPlugin中*/const fs = require("fs"); const HtmlWebpackPlugin = require("html-webpack-plugin");//生成html文件 const getFilePath = require("./getFilepath"); let htmlArr = [];getFilePath("./src").map((item)=>{let infoJson ={},infoData={};try{// 讀取pageinfo.json文件內(nèi)容，如果在頁(yè)面目錄下沒有找到pageinfo.json 捕獲異常infoJson = fs.readFileSync(`src/${item}/pageinfo.json`,"utf-8");//infoData = JSON.parse(infoJson);}catch(err){infoData = {};}htmlArr.push(new HtmlWebpackPlugin({title:infoData.title ? infoData.title : "webpack,react多頁(yè)面架構(gòu)",meta:{keywords: infoData.keywords ? infoData.keywords : "webpack，react，github",description:infoData.description ? infoData.description : "這是一個(gè)webpack，react多頁(yè)面架構(gòu)"},chunks:[`${item}/${item}`], //引入的jstemplate: "./src/template.html",filename : item == "index" ? "index.html" : `${item}/index.html`, //html位置minify:{//壓縮htmlcollapseWhitespace: true,preserveLineBreaks: true},})); });module.exports = htmlArr;

wbpack終極配置

這樣一個(gè)自動(dòng)化完整的多頁(yè)面架構(gòu)配置就完成了，如果我們要新創(chuàng)建一個(gè)頁(yè)面

在src下創(chuàng)建一個(gè)文件目錄
在新創(chuàng)建的文件目錄下添加index.js（必須，因?yàn)槭莣ebpack打包入口文件）
在新創(chuàng)建文件夾下添加pageinfo.json（非必須）供html插件使用
npm run dev開發(fā)

完整代碼參考項(xiàng)目code

版本

版本日期分支備注

2.0	2018-11-08	master	優(yōu)化html插件自動(dòng)化
1.0	2018-10-07	version1.0	第一版

總結(jié)

以上是生活随笔為你收集整理的webpack+react多页面开发架构的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： zanePerfor 一款完整，高性能，
下一篇： Windows 64位下为wampser