1. 程式人生 > >webpack 構建多頁面應用(以regularjs為例)

webpack 構建多頁面應用(以regularjs為例)

webpack-regular

github原始碼: https://github.com/fisher-zh/webpack-regular

基於webpack構建的多頁面網站開發環境。

webpack在前端開發的過程中逐漸扮演著越來越重要的角色,在使用vuejs開發單頁面應用的過程中,個人是傾向於直接使用vue-cli來搭建初期的環境,畢竟方便。但是在做一些需要相容老版本瀏覽器(如IE7、8)的時候,我們就需要重新進行框架的選擇,此示例中選用了網易的mvvm框架regularjs來進行多頁面網站的開發。

此示例已經集成了babel,你完全可以使用es6語法,同時添加了一些其他的外掛來進行低版本瀏覽器的相容,但是由於測試次數和環境以及一些低版本瀏覽器特有的相容方法限制,不能保證100%相容(需要自行對編譯出的檔案進行鍼對IE7、8的相容性修改),所以當你需要在生產環境中釋出編譯的檔案時,請一定要進行低版本瀏覽器的測試。一些瀏覽器相容問題可以在這裡查到

使用 ES6 的瀏覽器相容性問題

檔案結構

    ├─build (構建webpack環境)
    │  └─build.js             (打包)
    │  └─dev-server.js        (構建開發環境服務)
    │  └─entry.js             (入口)
    │  └─htmlconfig.js
    │  └─webpack.*.config.js  (生產及開發環境配置)
    ├─config (環境變數)
    ├─dist (檔案輸出目錄)
    └─src (前端開發目錄)
        ├─assets (基礎檔案)
        │
        ├─pages (頁面檔案)
        │  ├─A
        │  │ ├─index.html
│ │ ├─A.js │ │ │ ├─B │ │ ├─index.html │ │ ├─B.js │ │ │ └─router.js (頁面路由) │ └─static (靜態資原始檔夾)