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

jerome發表於2018-06-14
WebjQuery元件化

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

相關文章