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

創(chuàng)新互聯(lián)公司是一家專業(yè)從事網(wǎng)站建設(shè)、網(wǎng)站設(shè)計的網(wǎng)絡(luò)公司。作為專業(yè)網(wǎng)站建設(shè)公司,創(chuàng)新互聯(lián)公司依托的技術(shù)實力、以及多年的網(wǎng)站運營經(jīng)驗,為您提供專業(yè)的成都網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷推廣及網(wǎng)站設(shè)計開發(fā)服務(wù)！

Github地址

項目架構(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
• git

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

|-- webpack-react-multi-page //項目
  |-- dist //編譯生產(chǎn)目錄
    |-- index
      |-- index.css
      |-- index.js
    |-- about
      |-- about.css
      |-- about.js
    |-- images
    |-- index.html
    |-- about.html
  |-- node_modules //node包
  |-- src //開發(fā)目錄
    |-- index //index頁面打包入口
      |-- images/
      |-- app.js// index業(yè)務(wù)js
      |-- index.scss
      |-- index.js //index頁面js入口
    |-- about //about頁面打包入口
      |-- images/
      |-- app.js// about業(yè)務(wù)js
      |-- index.scss
      |-- index.js //about頁面js入口
    |-- template.html // html模板 
    |-- style.scss //公共scss
  |-- webpackConfig //在webpack中使用
    |-- getEntry.js //獲取入口
    |-- getFilepath.js //遍歷文件夾
    |-- htmlconfig.js //每個頁面html注入數(shù)據(jù)
  |-- package.json
  |-- .gitignore
  |-- webpack.config.js //webpack配置文件
  |-- www.js //生產(chǎn)啟動程序

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

本文標(biāo)題：webpack4+react多頁面架構(gòu)的實現(xiàn)-創(chuàng)新互聯(lián)
瀏覽地址：http://weahome.cn/article/djgidj.html