webpack+react多頁面開發(二)-終極架構

倉庫

github.com/leinov/webp…

特性

• ?‍?‍?‍? 支援多頁面同時熱載入開發
• ? 自動識別新建立頁面
• ? 每個頁面生成個性化資訊
• ? 分類打包
• ? 靈活擴充套件

安裝&使用

// clone
git 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
複製程式碼

專案架構

技術使用

• 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

目錄結構

|-- 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 //生產啟動程式
複製程式碼

完整wiki