讓webpack2兼容IE8如下代碼

時間 2019-12-10

原文原文鏈接

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

ie-webpack-start

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

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

重要

因爲webpack不支持低版本IE下啓動服務實時測試，必須經過打包才知道測試結果。
因此請用戶自行在其餘瀏覽器編寫測試，最後回跑測試打包的IE
代碼壓縮致使沒法兼容低版本IE,故取消代碼壓縮功能。
若有使用如Jquery第三方庫的同窗，最好自行引用它的min版本，而不是經過打包形式。（不然：反而使包變大）
本項目只是爲用戶提供使用ES6新特性的可能，和簡單方便的管理資源。其餘擴展功能不在本項目的範圍內。node

目錄簡介

介紹react
程序目錄jquery
項目啓動webpack
- 環境配置git
- 依賴配置github
- 命令說明web
使用手冊npm
常見問題
更新日誌
最重要的事情

介紹

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

關於【Webpack】

服務端使用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可讓代碼更優化。

關於【HTML】

支持單頁應用和多頁應用的混合開發。
自動引入頁面的CSS和JS文件。無需手動設置URL。(全部文件hash的改變都會致使文件名改變,這裏的資源引用全由內部自動完成)

關於【CSS】

css的模塊化，預處理器的編譯。（支持sass,scss,less,postcss）
針對低版本瀏覽器和其餘瀏覽器內核的特殊性，啓用autoprefixer自動添加瀏覽器前綴
可導入字體和字體圖標，操做很是簡單。（如阿里系icon）【配置文檔】
防緩存的hash規則

關於【JS】

支持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，可是這裏還有不少其它的處理：

`npm run <script>`	解釋
`start`	啓動3000端口服務，代碼熱替換開啓。
`build`	單純打包資源，不會進行代碼測試。
`deploy`	刪除舊文件，進行代碼測試，打包相關文件（默認目錄~/build）。
`test`	開啓Karma測試並生成覆蓋率報告。(默認關閉：啓動配置)
`visualizer`	打包資源分析
`clean`	清除打包的文件
`cnpm`	替換爲淘寶鏡像

開發使用 start
調試IE使用 build
發佈使用deploy