基于 webpack 的多页应用脚手架
基于 webpack 的多页应用脚手架
JavaScript 脚手架/样板
访问GitHub主页
共3Star
详细介绍
基于 webpack 的多页应用最佳实践
使用说明
- 本项目使用包管理工具NPM,因此需要先把本项目所依赖的包下载下来:
$ npm install
- 编译程序,生成的所有代码在
build
目录内。
$ npm run build # 生成生产环境的代码。用npm run watch或npm run dev可生成开发环境的代码
- 启动服务器,推荐直接使用webpack-dev-server
$ npm run start
- 理论上来说,webpack-dev-server会自动帮你打开浏览器并展示示例页面;如果没有的话,请手动打开浏览器,在地址栏里输入
http://localhost:8080
,Duang!页面就出来了!
scripts 说明
命令 | 作用&效果 |
---|---|
npm run build | 根据webpack.config.js ,build出一份生产环境的代码 |
npm run dev | 根据webpack.dev.config.js ,build出一份开发环境的代码 |
npm run watch | 在npm run dev 的基础上添加-- watch ,实时监控源文件,建议开发时使用这项 |
npm run start | 开启webpack-dev-server,然后就可以在 http://localhost:8080/ 查看成品了 |
npm run profile | 显示编译过程中每一项资源的耗时,用来调优的 |
npm run dll | 生成Dll文件,每次升级第三方库时都需要重新执行一遍 |
npm run analyse | 生成打包文件结构的可视化分析报告;注意请在npm run build 或npm run dev 后再执行 |
npm run analyze | 作用同上 |
目录结构说明
├─build # 编译后生成的所有代码、资源(图片、字体等,虽然只是简单的从源目录迁移过来)
├─node_modules # 利用npm管理的所有包及其依赖
├─vendor # 所有不能用npm管理的第三方库
├─.babelrc # babel的配置文件
├─.eslintrc # ESLint的配置文件
├─index.html # 仅作为重定向使用
├─package.json # npm的配置文件
├─conf # 存放分拆后的webpack配置文件
│ ├─base # 主要是存放一些变量
│ ├─inherit # 存放生产环境和开发环境相同的部分,以供继承
│ └─vendor # 存放webpack兼容第三方库所需的配置文件
├─webpack.config.js # 生产环境的webpack配置文件(无实质内容,仅为组织整理)
├─webpack.dev.config.js # 开发环境的webpack配置文件(无实质内容,仅为组织整理)
├─src # 当前项目的源码
├─pages # 各个页面独有的部分,如入口文件、只有该页面使用到的css、模板文件等
│ ├─alert # 业务模块
│ │ └─index # 具体页面
│ ├─index # 业务模块
│ │ ├─index # 具体页面
│ │ └─login # 具体页面
│ │ └─templates # 如果一个页面的HTML比较复杂,可以分成多块再拼在一起
│ └─user # 业务模块
│ ├─edit-password # 具体页面
│ └─modify-info # 具体页面
└─public-resource # 各个页面使用到的公共资源
├─components # 组件,可以是纯HTML,也可以包含js/css/image等,看自己需要
│ ├─footer # 页尾
│ ├─header # 页头
│ ├─side-menu # 侧边栏
│ └─top-nav # 顶部菜单
├─config # 各种配置文件
├─iconfont # iconfont的字体文件
├─imgs # 公用的图片资源
├─layout # UI布局,组织各个组件拼起来,因应需要可以有不同的布局套路
│ ├─layout # 具体的布局套路
│ └─layout-without-nav # 具体的布局套路
├─less # less文件,用sass的也可以,又或者是纯css
│ ├─base-dir
│ ├─components-dir # 如果组件本身不需要js的,那么要加载组件的css比较困难,我建议可以直接用less来加载
│ └─base.less # 组织所有的less文件
├─libs # 与业务逻辑无关的库都可以放到这里
└─logic # 业务逻辑
推荐源码
-
2 Star
-
4 Star
-
1 Star
-
1 Star
-
158 Star
-
5 Star
-
2 Star
-
9 Star
-
0 Star
-
5 Star