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

binaryTree 發(fā)布于2019-08-22 18:04 / 2731人閱讀

摘要：基于搭建純靜態(tài)頁面型前端工程解決方案模板按需加載模塊，按需進(jìn)行懶加載，在實(shí)際用到某些模塊的時(shí)候再增量更新多入口文件，自動掃描入口。它支持和，以及其他的模塊系統(tǒng)。

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

基于webpack搭建純靜態(tài)頁面型前端工程解決方案模板

按需加載模塊，按需進(jìn)行懶加載，在實(shí)際用到某些模塊的時(shí)候再增量更新

多入口文件，自動掃描入口。同時(shí)支持SPA和多頁面型的項(xiàng)目

靜態(tài)資源按需自動注入到html中，并可自動加上hash值

支持js、css、scss等代碼檢查、打包、壓縮混淆、圖片轉(zhuǎn)base64等

公用lib組件抽離打包，生成一個(gè)公共的bundle文件

功能標(biāo)識，根據(jù)開發(fā)/測試環(huán)境和生產(chǎn)環(huán)境進(jìn)行不同配置的打包

支持自動部署打包發(fā)布遠(yuǎn)程服務(wù)器

支持組件化開發(fā)(利用了ejs模版方法)

why webpack？

它和browserify類似 但是它可以把你的應(yīng)用拆分成多個(gè)文件。如果你的單頁應(yīng)用里有很多頁面，用戶只會下載當(dāng)前訪問頁面的代碼。當(dāng)他們訪問應(yīng)用中的其他頁面時(shí)，不再需要加載與之前頁面重復(fù)的通用代碼。

它可以替代gulp和grunt 因?yàn)樗梢詷?gòu)建打包c(diǎn)ss、預(yù)處理css、編譯js和圖片等。

它支持AMD和CommonJS，以及其他的模塊系統(tǒng)(Angular, ES6)。如果你不太熟悉如何使用，就用CommonJS吧。

環(huán)境

Node.js

拷貝項(xiàng)目模板

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

安裝依賴

$ cd webpack-jquery

$ npm install

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

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

開發(fā)要求

約定/src/*.html為應(yīng)用的入口文件，在/src/js/ 一級目錄下需有一個(gè)同名的js文件作為該文件的入口。

編譯（測試/dev環(huán)境）