• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

chemdemo/webpack-seed: Frontend engineering solution based on webpack and gulp.

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

chemdemo/webpack-seed

开源软件地址(OpenSource Url):

https://github.com/chemdemo/webpack-seed

开源编程语言(OpenSource Language):

JavaScript 97.5%

开源软件介绍(OpenSource Introduction):

webpack-seed

基于webpack搭建纯静态页面型前端工程解决方案模板。

安装软件

  • Node.js:v4.0+

  • compass(非必须):v1.0+

拷贝项目模板

$ git clone https://github.com/chemdemo/webpack-seed.git

安装依赖模块

$ npm install -g gulp webpack
$ npm install -g node-dev # 推荐这个工具,代码改动会自动重启node进程
$ cd webpack-seed && npm install

本地开发环境

  • 启动本地开发服务器

    $ npm run start-dev
  • 启动compass监听

    $ compass watch

    compass在这里主要用于生成雪碧,雪碧图生成有多种方案,不一定要用compass。如果项目没用到雪碧图,完全可以不用compass,因为sass-loader可以直接加载sass文件

业务开发

目录结构
.
├── config.rb                 # compass配置
├── gulpfile.js               # gulp任务配置
├── mock/                     # 假数据文件
├── package.json              # 项目配置
├── README.md                 # 项目说明
├── server                    # 本地server
   ├── app.js                # 本地server入口
   ├── home.html             # 列出项目所有入口文件
   └── routes.js             # 本地路由配置
├── src                       # 源码目录
   ├── a.html                # 入口文件a
   ├── b.html                # 入口文件b
   ├── c.html                # 入口文件c
   ├── css/                  # css资源
   ├── img/                  # 图片资源
   ├── js                    # js&jsx资源
      ├── a.js              # a页面入口
      ├── b.js              # b页面入口
      ├── c.js              # c页面入口
      ├── components/       # 组件
      ├── helpers/          # 业务相关的辅助工具
      ├── lib/              # 没有存放在npm的第三方库或者下载存放到本地的基础库,如jQuery、Zepto、React等
      └── utils/            # 业务无关的辅助工具
   ├── scss/                 # scss资源
   ├── pathmap.json          # 手动配置某些模块的路径,可以加快webpack的编译速度
   └── tmpl/                 # 模板目录,如果是React的项目这个可以删掉
├── make-webpack.config.js    # webpack配置
├── webpack.config.js         # 正式环境webpack配置入口
└── webpack-dev.config.js     # 开发环境webpack配置入口
单/多页面支持

约定/src/*.html为应用的入口文件,在/src/js/一级目录下有一个同名的js文件作为该入口文件的逻辑入口(即entry)。

在编译时会扫描入口html文件并且根据webpack配置项解决entry的路径依赖,同时还会对html文件进行压缩、字符替换等处理。

这样可以做到同时支持SPA和多页面型的项目。

编译

$ npm run build

模拟生产环境

$ npm run start-release

部署&发布

纯静态页面型的应用,最简单的做法是直接把assets文件夹部署到指定机器即可(先配置好机器ip、密码、上传路径等信息):

$ npm run deploy # or run `gulp deploy`

如果需要将生成的js、css、图片等发布到cdn,修改下publicPath项为目标cdn地址即可:

...
output: {
  ...
  publicPath: debug ? '' : 'http://cdn.site.com/'
}
...

修改日志

2016.07.12

  • 配置增加DefinePlugin插件,即生产模式build时使用production模式,减小打包后文件的体积

2016.05.23

  • 修复版本升级带来的一些bug
  • 增加React demo(其实本来就是支持的T_T)

2016.03.28

  • 升级extract-text-webpack-plugin到v1.0+
  • webpack配置修改,开发模式下css也是用link引用,便于调试
  • webpack配置pathMap项,添加React等常用lib的默认路径
  • webpack配置增加liveload支持 by @liupy525

License

MIT.




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap