webpack+jquery 组件化、模块化开发的解决方案

约定不等于承诺〃 2022-04-25 10:10 339阅读 0赞

[demo][]

基于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

[转载][Link 1]

[demo]: https://jeromehan.github.io/webpack-jquery/dist/
[Link 1]: https://segmentfault.com/a/1190000015289813?utm_source=tag-newest