摘要：可用編譯低版本代碼水有多深不得而知啟動(dòng)新技術(shù)提供測(cè)試框架進(jìn)行單元測(cè)試，代碼覆蓋率報(bào)告，可與和快速對(duì)接。頁面的其他資源文件，通過引入單元測(cè)試項(xiàng)目啟動(dòng)環(huán)境配置為了把保證項(xiàng)目正常運(yùn)行，請(qǐng)自行更新相關(guān)環(huán)境。

?

IE 9+ 用戶請(qǐng)轉(zhuǎn)至：avalon-webpack-start

React 用戶請(qǐng)轉(zhuǎn)至：react-webpack-start

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

介紹

程序目錄

項(xiàng)目啟動(dòng)

環(huán)境配置

依賴配置

命令說明

使用手冊(cè)

基本

創(chuàng)建HTML視圖

配置JS,CSS資源文件

高級(jí)

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

引用字體圖標(biāo)Icon

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

修改目錄結(jié)構(gòu)

單元測(cè)試

發(fā)布

常見問題

更新日志

最重要的事情

這個(gè)一個(gè)以webpack2為基礎(chǔ)，啟用tree-shaking新技術(shù),為打包支持到低版本的webpack2實(shí)驗(yàn)性腳手架。
本項(xiàng)目使用avalon2作為演示框架。

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

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

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

啟動(dòng)新技術(shù)tree-shaking

提供測(cè)試框架進(jìn)行單元測(cè)試，代碼覆蓋率報(bào)告，可與Travis-ci和Coveralls快速對(duì)接?！九渲谜f明】

Babel被配置babel-plugin-transform-runtime可以讓代碼更優(yōu)化。

支持單頁應(yīng)用和多頁應(yīng)用的混合開發(fā)。

自動(dòng)引入頁面的CSS和JS文件。無需手動(dòng)設(shè)置URL。(所有文件hash的改變都會(huì)導(dǎo)致文件名改變,這里的資源引用全由內(nèi)部自動(dòng)完成)

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

針對(duì)低版本瀏覽器和其他瀏覽器內(nèi)核的特殊性，啟用autoprefixer自動(dòng)添加瀏覽器前綴

可導(dǎo)入字體和字體圖標(biāo)，操作非常簡(jiǎn)單。（如阿里系icon）【配置文檔】

防緩存的hash規(guī)則

支持ES5,ES6編寫邏輯代碼

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

防緩存的hash規(guī)則

快速編譯，自動(dòng)刷新。

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

為了把保證項(xiàng)目正常運(yùn)行，請(qǐng)自行更新相關(guān)環(huán)境。

安裝node.js

安裝git

安裝Yarn（可選）

首先clone項(xiàng)目

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

由于國(guó)內(nèi)有一堵高墻的存在建議國(guó)內(nèi)用戶切換源地址：

$ npm run cnpm

以后請(qǐng)使用cnpm替代npm操作

下載依賴

請(qǐng)確保你的環(huán)境配置完成，然后就可以開始以下步驟

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/

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