5

github项目地址:https://github.com/chemdemo/webpack-bootstrap

安装软件

  • iojs:v2.0+

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

拷贝项目模板

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

安装依赖模块

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

本地开发环境

  • 启动compass监听

    ``` bash
    $ compass watch
    ```
    compass在这里主要用于生成雪碧,雪碧图生成有多种方案,不一定要用compass。如果项目没用到雪碧图,完全可以不用compass,因为`sass-loader`可以直接加载sass文件
    
  • 启动本地开发服务器

    ``` bash
    $ npm run start
    ```
    浏览器打开`http://localhost:3005/a.html`即可访问。
    

业务开发

目录结构
- root/
  - src/                   # 开发目录
    + css/                 # css资源
    + img/                 # 图片资源
    + js/                  # js&jsx资源
    + scss/                # scss资源
    + tmpl/                # 前端模板
    a.html                 # 入口文件a
    b.html                 # 入口文件b
  + assets/                # 编译输出目录
  + mock/                  # 假数据文件
  app.js                   # 本地server入口
  routes.js                # 本地路由配置
  webpack.config.js        # webpack配置文件
  webpack-dev.config.js    # 开发环境webpack配置文件
  gulpfile.js              # gulp任务配置
  config.rb                # compass配置
  package.json             # 项目配置
  README.md                # 项目说明
单/多页面支持

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

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

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

编译

$ npm run build

模拟生产环境

$ npm run assets

部署&发布

纯静态页面型的应用,最简单的做法是直接把assets文件夹部署到指定机器即可。

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

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

dmyang
3.4k 声望249 粉丝

一只养喵的程序员。