webpack2正式優化版，簡化操做

webpack2-Scaffolding

• 請各位看客老爺不要吝嗇本身的Star，先來Github右上角Star一下唄。

• Github右上角Star。

• Github右上角Star。

• 重要的事情說三遍

項目地址

https://github.com/sayll/avalon-webpack-start

介紹

webpack2腳手架正式版，一個多資源統籌的腳手架。
本項目使用avalon2做爲演示框架。
爲兼容低版本瀏覽器，我也是強烈推薦一下它。市面上應該也算惟一可以支持到IE8如下的MVVM框架了吧。

關於【Webpack】

1. 服務端使用Koa。須要注意的是，只有一個目的那就是提供了webpack-dev-middleware 和 webpack-hot-middleware（代碼熱替換）。使用自定義的Koa程序替換webpack-dev-server，讓它更容易實現universal 渲染和爲了避免使這個包過於龐大。

2. 針對不一樣的loader採用了多線程編譯，極大的加快了編譯速度。

3. 使用webpack.DllReferencePlugin打包框架和庫。加快編譯與打包速度。

4. 啓動新技術tree-shaking

5. 提供測試框架進行單元測試，代碼覆蓋率報告，可與Travis-ci和Coveralls快速對接。【配置說明】

6. Babel被配置babel-plugin-transform-runtime可讓代碼更優化。

關於【Css】

1. css的模塊化，預處理器的編譯。（支持sass,scss,less,postcss）

2. 針對低版本瀏覽器和其餘瀏覽器內核的特殊性，啓用autoprefixer自動添加瀏覽器前綴

3. 針對移動開發，有獨特的處理方案。（具體文檔等待補充）

4. 可導入字體和字體圖標，操做很是簡單。（如阿里系icon）【配置文檔】

5. 每次修改都會生成新的文件名，防止舊樣式緩存帶來的影響。（與JS間作了特殊處理，經過JS引入的CSS不會因JS改變而改變它的hash值）

6. 針對開發模式啓用修改自動刷新頁面。（作了特殊處理，發佈模式將獲得優化）

關於【Js】

1. 支持ES6的最新特性

2. 模塊化，可才用ES6的import，也可用AMD規範的require

3. 每次修改都會生成新的文件名，防止舊腳本緩存帶來的影響。（與CSS間作了特殊處理，經過JS引入的CSS不會因CSS改變而改變它的hash值）

4. 快速編譯，自動刷新。

5. 將經常使用的框架和庫進行單獨打包。(Dll)防止重複引用，致使打包文件臃腫。

6. 提供公共腳本的文件入口，此文件將被全部頁面自動引用。（可設置全局變量，引入公共的庫。如Jquery）

關於【Html】

1. 支持單頁應用和多頁應用的混合開發。

2. 自動引入頁面的CSS和JS文件。無需手動設置URL。(全部文件hash的改變都會致使文件名改變,這裏的資源引用全由內部自動完成)

3. 若有使用經常使用的框架和庫進行單獨打包。(Dll),將須要單獨引用dll的vendor.js;

開始

環境配置

1. 安裝node.js

2. 安裝git

依賴配置

確認好你的環境配置，而後就能夠開始如下步驟。

$ git clone https://github.com/sayll/avalon-webpack-start.git
$ cd avalon-webpack-start
$ npm install                   # Install project dependencies
$ npm start                     # Compile and launch

若是一切順利,就能正常打開端口:http://localhost:1000/

開發過程當中，你用得最多的會是npm start，可是這裏還有不少其它的處理：

npm run <script>	解釋
start	第一次運行啓用。生成DLL文件，服務啓動在1000端口，代碼熱替換開啓。
deploy	刪除舊文件，生成新DLL，進行代碼測試，打包相關文件（默認目錄~/build）。
dev	與npm start相似相同,只有當DLL文件存在時可用。加快開發速度。
test	開啓Karma測試並生成覆蓋率報告。
visualizer	打包資源分析
build	同dev在DLL文件存在時，加快打包速度。
clean	清除打包的文件
cnpm	替換爲淘寶鏡像
dll	適合第一次啓動時運行，生成DLL文件。

• 第一次運行，推薦使用 start,後續調試使用dev

• 打包推薦使用deploy

• 目前全部相關開發打包都需依賴dll,當不清楚或運行出錯時，嘗試運行一下npm run dll,再完成接下來的操做。

程序目錄

.
├── build                    # 全部打包配置項
├── config                   # 項目配置文件
├── server                   # Express 程序 (使用 webpack 中間件)
│   └── main.js              # 服務端程序入口文件
├── app                      # 程序源文件
│   ├── html                 # 多頁或單頁應用的入口HTML
│   ├── source               # 公共的資源文件
│       ├── css
│       ├── font
│       ├── img
|       └── js              
│   ├── static               # 公共的靜態資源文件(全部內部文件經過index.js引入，可配置全局變量。)
│   └── view                 # 主路由和異步分割點
│       └── index            # 匹配html文件夾中的index.html。（css,js文件名對應文件夾名，可直接打包無需單獨引入）
│           ├── index.js     # 直接與index.html匹配的入口文件，能夠做爲單頁應用的入口，在內部定義本身的項目目錄
│           ├── index.css    # 如是多頁應用，可設置對應的CSS文件，直接匹配。
│           └── other **     # 頁面的其餘資源文件，經過index.js引入
└── test                     # 單元測試（往後調整，待開發ing）

使用手冊

流程

基本

1. 位於app/html建立HTML視圖【更多說明】

2. 主動引入DLL的JS,默認地址爲<script src="/dll/vendor.js"></script>

3. 位於app/view配置html相關的JS和CSS文件。(JS和CSS需與HTML保持一致，可參考現有模版)【更多說明】

高級

1. 引用字體圖標Icon【更多說明】

2. 使用框架(avalon)或庫(jquery)【更多說明】

3. 設置全局變量。雖引入公共庫，但每次調用都需從新聲明。因此就有了公共文件來提早聲明。【更多說明】

4. 使用Css預處理器(更多說明)

5. 使用CDN(更多說明)

6. 修改目錄結構(更多說明)

最後

1. 打包文件爲build文件夾，請以此爲根目錄。

更新日誌

更新詳情

最重要的事情

項目地址: https://github.com/sayll/avalon-webpack-start

• 親不要吝嗇本身的Star，到Github右上角Star一下唄。