# mht_mobile **Repository Path**: winfred_feng/mht_mobile ## Basic Information - **Project Name**: mht_mobile - **Description**: 小马商标移动端 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1 - **Created**: 2020-07-31 - **Last Updated**: 2021-05-23 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 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