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

概覽

特性

安裝&使用

// clonegit clone git@github.com:leinov/webpack-react-multi-page.git// 安裝依賴包npm install// 開發npm run dev// 編譯打包npm run build// 啟動生產頁面npm start

新創建頁面在src下添加文件夾并創建pageinfo.json 然后npm run dev 即可

|-- src  |-- index/  |-- page2/    |-- index.js    |-- pageinfo.json

項目架構

技術使用

目錄結構

|-- webpack-react-multi-pages //項目  |-- dist //編譯生產目錄    |-- index      |-- index.css      |-- index.js    |-- about      |-- about.css      |-- about.js    |-- images    |-- index.html    |-- about.html  |-- node_modules //node包  |-- src //開發目錄    |-- index //index頁面打包入口      |-- images/      |-- js        |-- app.js// 業務js      |-- index.sass      |-- index.js //頁面js入口    |-- about //about頁面打包入口      |-- images/        |--js          |-- app.js// 業務js      |-- about.sass      |-- about.js //頁面js入口    |-- template.html // html模板    |-- style.sass //公共sass  |-- webpackConfig //在webpack中使用    |-- getEntry.js //獲取入口    |-- getFilepath.js //src下需要打包頁面文件夾    |-- htmlconfig.js //每個頁面html注入數據  |-- package.json  |-- .gitignore  |-- webpack.config.js //webpack配置文件  |-- www.js //生產啟動程序