webpack+jquery 組件化、模塊化開發的解決方案

online demo https://jeromehan.github.io/w...

基於webpack搭建純靜態頁面型前端工程解決方案模板

• 按需加載模塊，按需進行懶加載，在實際用到某些模塊的時候再增量更新
• 多入口文件，自動掃描入口。同時支持SPA和多頁面型的項目
• 靜態資源按需自動注入到html中，並可自動加上hash值
• 支持js、css、scss等代碼檢查、打包、壓縮混淆、圖片轉base64等
• 公用lib組件抽離打包，生成一個公共的bundle文件
• 功能標識，根據開發/測試環境和生產環境進行不一樣配置的打包
• 支持自動部署打包發佈遠程服務器
• 支持組件化開發(利用了ejs模版方法)

why webpack？

• 它和browserify相似 可是它能夠把你的應用拆分紅多個文件。若是你的單頁應用裏有不少頁面，用戶只會下載當前訪問頁面的代碼。當他們訪問應用中的其餘頁面時，再也不須要加載與以前頁面重複的通用代碼。
• 它能夠替代gulp和grunt 由於他能夠構建打包css、預處理css、編譯js和圖片等。
• 它支持AMD和CommonJS，以及其餘的模塊系統(Angular, ES6)。若是你不太熟悉如何使用，就用CommonJS吧。

環境

• Node.js

拷貝項目模板

$ git clone https://github.com/jeromehan/webpack-jquery.git

安裝依賴

$ cd webpack-jquery

$ npm install

目錄結構

.
    ├── package.json              # 項目配置
    ├── README.md                 # 項目說明
    ├── src                       # 源碼目錄
    │   ├── index.ejs                # 首頁
    │   ├── pageA.html                # 頁面A
    │   ├── css/                  # css資源
    │   ├── img/                  # 圖片資源
    │   ├── js                    # js&jsx資源
    │   │   ├── index.js              # 主頁入口
    │   │   ├── pageA.js              # 頁面A入口
    │   │   ├── lib/              # 沒有存放在npm的第三方庫或者下載存放到本地的基礎庫，如jQuery、Zepto、React等
    ├── webpack.config.allinone.js    # webpack配置
    ├── webpack.config.js         # 正式環境webpack配置入口
    └── webpack-dev.config.js     # 開發環境webpack配置入口

開發要求

約定/src/*.html爲應用的入口文件，在/src/js/ 一級目錄下需有一個同名的js文件做爲該文件的入口。

編譯（測試/dev環境）

$ npm run dev

編譯（生產環境）

生產環境會對js混淆壓縮，對css、html進行壓縮，字符替換等處理

$ npm run build