摘要：可用編譯低版本代碼水有多深不得而知啟動新技術提供測試框架進行單元測試，代碼覆蓋率報告，可與和快速對接。頁面的其他資源文件，通過引入單元測試項目啟動環境配置為了把保證項目正常運行，請自行更新相關環境。

?

IE 9+ 用戶請轉至：avalon-webpack-start

React 用戶請轉至：react-webpack-start

由于webpack不支持低版本IE下啟動服務實時測試，必須通過打包才知道測試結果。
所以請用戶自行在其他瀏覽器編寫測試，最后回跑測試打包的IE
代碼壓縮導致無法兼容低版本IE,故取消代碼壓縮功能。
如有使用如Jquery第三方庫的同學，最好自行引用它的min版本，而不是通過打包形式。（否則：反而使包變大）
本項目只是為用戶提供使用ES6新特性的可能，和簡單方便的管理資源。其他擴展功能不在本項目的范圍內。

介紹

程序目錄

項目啟動

環境配置

依賴配置

命令說明

使用手冊

基本

創建HTML視圖

配置JS,CSS資源文件

高級

使用框架(avalon2)或庫(jquery)

引用字體圖標Icon

使用CSS預處理器、CDN或開啟多文件路口main.js

修改目錄結構

單元測試

發布

常見問題

更新日志

最重要的事情

這個一個以webpack2為基礎，啟用tree-shaking新技術,為打包支持到低版本的webpack2實驗性腳手架。
本項目使用avalon2作為演示框架。

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

針對不同的loader采用了多線程編譯，極大的加快了編譯速度。

可用ES6編譯低版本IE代碼【水有多深不得而知】

啟動新技術tree-shaking

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

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

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

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

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

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

可導入字體和字體圖標，操作非常簡單。（如阿里系icon）【配置文檔】

防緩存的hash規則

支持ES5,ES6編寫邏輯代碼

由于兼容性問題只可使用AMD規范的require,無法使用 import 和 export

防緩存的hash規則

快速編譯，自動刷新。

├── build                    # 所有打包配置項
├── config                   # 項目配置文件
│ ? ├── webpack              # webpack配置文件夾
│   └── karma.conf.js        # karma配置文件
├── server                   # Express 程序 (使用 webpack 中間件)
│   └── main.js              # 服務端程序入口文件
├── app                      # 程序源文件
│ ? ├── html ? ? ? ? ? ? ? ? # 多頁或單頁應用的入口HTML
│ ? └──  source ? ? ? ? ? ? ? # 公共的資源文件
│ ? ├ ?  ├── css
│ ? ├ ?  ├── js
│ ? ├ ?  ├── font
│ ? ├ ?  └── img? ? ? ? ? ? ?
│ ? ├── static ? ? ? ? ? ? ? # 公共的靜態資源文件(所有內部文件通過index.js引入，可配置全局變量。)
│ ? └── view ? ? ? ? ? ? ?   # 主路由和異步分割點
│ ? ? ? └── index ? ? ? ? ?  # 匹配html文件夾中的index.html。（css,js文件名對應文件夾名，可直接打包無需多帶帶引入）
│ ? ? ? ? ? ├── index.js ? ? # 直接與index.html匹配的入口文件，可以作為單頁應用的入口，在內部定義自己的項目目錄
│ ? ? ? ? ? ├── index.css ? ?# 如是多頁應用，可設置對應的CSS文件，直接匹配。
│ ? ? ? ? ? └── other ** ? ? # 頁面的其他資源文件，通過index.js引入
└── tests ? ? ? ? ? ? ? ? ?  # 單元測試

為了把保證項目正常運行，請自行更新相關環境。

安裝node.js

安裝git

安裝Yarn（可選）

首先clone項目

$ git clone https://github.com/sayll/ie-webpack-start.git
$ cd ie-webpack-start

由于國內有一堵高墻的存在建議國內用戶切換源地址：

$ npm run cnpm

以后請使用cnpm替代npm操作

下載依賴

請確保你的環境配置完成，然后就可以開始以下步驟

npm 用戶：

$ npm install                   # Install project dependencies
$ npm start                     # Compile and launch

cnpm 用戶：

$ cnpm install                   # Install project dependencies
$ npm start                     # Compile and launch

Yarn 用戶：

$ yarn                          # Install project dependencies
$ yarn start                    # Compile and launch

如果一切順利,就能正常打開端口:http://localhost:3000/

開發過程中，你用得最多的會是npm start，但是這里還有很多其它的處理：