基於webpack+gulp搭建純靜態頁面型前端工程模板

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/'
}
...