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

2023年5月9日 104次阅读 来源: jerome

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
    原文作者：jerome
    原文地址: https://segmentfault.com/a/1190000015289813
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞