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

binaryTree 發布于2019-08-22 18:04 / 2739人閱讀

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

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

GPU云服務器云服務器 webpack cdn jquery webpack引用jquery 組件化開發組件開發

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/95457.html

Vue 2.x 實戰之后臺管理系統開發（一）

摘要：導語下文實戰之后臺管理系統開發二該文章將從頭到尾梳理我是如何使用開發一個后臺管理項目的，我會將自己遇到的問題貼出，希望可以幫助到其他人。構建項目框架準備對于大陸用戶，建議將的注冊表源設置為國內的鏡像，如淘寶鏡像，可以大幅提升安裝速度。 1. 導語下文：Vue 2.x 實戰之后臺管理系統開發（二）該文章將從頭到尾梳理我是如何使用 Vue 2 開發一個后臺管理項目的，我會將自己遇到的問...

darkbaby123 2019-08-20 16:49 評論0 收藏0
vue開發看這篇文章就夠了

摘要：注意此處獲取的數據是更新后的數據，但是獲取頁面中的元素是更新之前的鉤子函數說明組件已經更新，所以你現在可以執行依賴于的操作。鉤子函數說明實例銷毀 Vue -漸進式JavaScript框架介紹 vue 中文網 vue github Vue.js 是一套構建用戶界面(UI)的漸進式JavaScript框架庫和框架的區別我們所說的前端框架與庫的區別？ Library 庫，本質上是一...

fsmStudy 2019-08-21 18:37 評論0 收藏0
[譯] Webpack 前端構建集成方案

摘要：現在，讓我們創建項目的入口，并使用然后創建我們的配置，文件名為，的配置文件是一個，并且需要成一個對象在這里，告訴那些文件是你應用的入口。代碼分割便是用來解決之前所說的單集成模塊不可維護的引用的問題。構建工具逐漸成為前端工程必備的工具，Grunt、Gulp、Fis、Webpack等等，譯者有幸使用過Fis、Gulp。前者是百度的集成化方案，提供了一整套前端構建方案，優點是基本幫你搞定了...

lewif 2019-08-21 10:52 評論0 收藏0
客服系統從Require.js到Webpack

摘要：客服系統之前都是用進行模塊化編程，并使用相應的打包文件，本次遷移成。除了組件化開發打包發布，還有性能優化工程化管理需要考慮，而并不擅長做這些事情，如等。客服系統之前都是用Require.js 2.2.0進行模塊化編程，并使用相應的r.js打包js文件，本次遷移成Webpack3.3.0。為什么遷移項目前期，require.js可以很好的解決需求，但是隨著項目成長到具有上百個JS文...

zhangyucha0 2019-08-20 19:09 評論0 收藏0
前端相關匯總

摘要：簡介前端發展迅速，開發者富有的創造力不斷的給前端生態注入新生命，各種庫框架工程化構建工具層出不窮，眼花繚亂，不盲目追求前沿技術，學習框架和庫在滿足自己開發需求的基礎上，然后最好可以對源碼進行調研，了解和深入實現原理，從中可以獲得更多的收獲隨 showImg(https://segmentfault.com/img/remote/1460000016784101?w=936&h=397)...

BenCHou 2019-08-23 12:31 評論0 收藏0