# webpack-jQuery #
online demo https://jeromehan.github.io/webpack-jquery/dist/
基于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
## 目录结构 ##
``` js
.
├── 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等
│ ├── pathmap.json # 手动配置某些模块的路径,可以加快webpack的编译速度
├── 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
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
webpack-jQuery 在线演示 基于webpack建造纯静态页面型前端工程解决方案模板 按需加载模块,按需进行懒加载,在实际用到某些模块的时候再增量更新 多入口文件,自动扫描入口。同时支持SPA和多页面型的项目 静态资源按需自动注入到html中,从而自动加上hash值 支持js,css,scss等代码检查,打包,压缩替换,图片转base64等 公用lib组件抽离打包,生成一个公共的bundle文件 功能标识,根据开发/测试环境和生产环境进行不同配置的打包 支持自动部署打包发布远程服务器 支持组件化开发(利用了ejs模版方法) 为什么是webpack? 它和browserify类似但它
资源详情
资源评论
资源推荐
收起资源包目录
webpack-jquery-master.zip (42个子文件)
webpack-jquery-master
webpack-dev.config.js 120B
.gitignore 335B
.babelrc 84B
package.json 1KB
src
components
footer
footer.ejs 53B
footer.js 24B
footer.css 66B
header
header.js 24B
header.ejs 54B
header.css 66B
data
data.js 74B
js
index.js 345B
pageA.js 249B
pageB.js 182B
lib
common.js 179B
jquery-1.12.4.js 287KB
loadsh.js 71KB
zepto.js 85KB
css
common.css 370B
pageA.css 25B
index.scss 313B
pageA.ejs 278B
index.ejs 494B
pageB.ejs 283B
img
webpack.png 53KB
small-webpack.png 10KB
webpack.config.js 121B
postcss.config.js 113B
dist
pageA.html 512B
js
vendor.6c0abe3.js 97KB
index.6c0abe3.js 1KB
pageA.6c0abe3.js 1KB
pageB.6c0abe3.js 1KB
pageB.html 520B
css
d1ecf754.pageA.min.css 119B
7db05409.pageB.min.css 101B
77734fb9.index.min.css 705B
index.html 671B
img
64625394.small-webpack.png 10KB
0714810a.webpack.png 53KB
webpack.config.allinone.js 6KB
README.md 3KB
共 42 条
- 1
许吴倩
- 粉丝: 23
- 资源: 4547
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0