webpack2正式版

webpack2正式版

webpack2正式版，簡單方便的構建單頁和多頁用用。（啓用tree-shaking新技術）
地址：avalon-webpack-start

這個啓動包的針對單頁應用和多頁應用作了特殊處理，能夠混合開發。全部都是可配置，富特性，基於webpack已經提供代碼熱加載，使用postCss(可添加替換sass,less)預處理css，代碼分割等等更多。（下一步是：完善單元測試，代碼覆蓋率報告）

若是你們有更好的想法及建議請提Issues。

以爲不錯的話，請Star一下本項目，這是對做者最大的支持。

開始

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

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

---

關於package.json中dependencies的相關依賴，請自行下載。本例子以react爲框架

若是一切順利,就能正常打開端口:127.0.0.1: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               # 公共的資源文件
│   ├── static               # 靜態文件(不要處處imported源文件，全部內部文件經過index.js引入，配置後單獨打包)
│   └── view                 # 主路由和異步分割點
│       └── index            # 匹配html文件夾中的index.html。（css,js文件名對應文件夾名，可直接打包無需單獨引入）
│           ├── index.js     # 直接與index.html匹配的入口文件，能夠做爲單頁應用的入口，在內部定義本身的項目目錄
│           ├── index.css    # 如是多頁應用，可設置對應的CSS文件，直接匹配。
│           └── other **     # 頁面的其餘資源文件，經過index.js引入
└── test                     # 單元測試（往後調整，待開發ing）

樣式

使用postCss(可添加替換sass,less)預處理css。

服務端

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

打包優化

Babel被配置babel-plugin-transform-runtime可讓代碼更優化。dll文件加速打包和開發速度。資源的特殊匹配，避免引入無關的包文件。

後續

項目地址：avalon-webpack-start

功能將慢慢完善，文檔方面也會補全。案例也會編寫。敬請期待！