1 模塊化工具Webpack
1.1 概念簡(jiǎn)介
1.1.1 WebPack是什么
????1 一個(gè)打包工具
????2 一個(gè)模塊加載工具
????3 各種資源都可以當(dāng)成模塊來(lái)處理
????4 網(wǎng)站 http://webpack.github.io/
????????如今，越來(lái)越多的JavaScript代碼被使用在頁(yè)面上，我們添加很多的內(nèi)容在瀏覽器里。如何去很好的組織這些代碼，成為了一個(gè)必須要解決的難題。
????????對(duì)于模塊的組織，通常有如下幾種方法：
????1 通過(guò)書(shū)寫(xiě)在不同文件中，使用script標(biāo)簽進(jìn)行加載
????2 CommonJS進(jìn)行加載（NodeJS就使用這種方式）
????3 AMD進(jìn)行加載（require.js使用這種方式）
????4 ES6模塊
?
思考：為什么只有JS需要被模塊化管理，前臺(tái)的很多預(yù)編譯內(nèi)容，不需要管理嗎？
????基于以上的思考，WebPack項(xiàng)目有如下幾個(gè)目標(biāo)：
????? 將依賴樹(shù)拆分，保證按需加載
????? 保證初始加載的速度
????? 所有靜態(tài)資源可以被模塊化
????? 可以整合第三方的庫(kù)和模塊
????? 可以構(gòu)造大系統(tǒng)
????????從下圖可以比較清晰的看出WebPack的功能
1.1.2 WebPack的特點(diǎn)
????1 豐富的插件，方便進(jìn)行開(kāi)發(fā)工作
????2 大量的加載器，包括加載各種靜態(tài)資源
????3 代碼分割，提供按需加載的能力
????4 發(fā)布工具
1.1.3 WebPack的優(yōu)勢(shì)
????? webpack 是以 commonJS 的形式來(lái)書(shū)寫(xiě)腳本滴，但對(duì) AMD/CMD 的支持也很全面，方便舊項(xiàng)目進(jìn)行代碼遷移。
????? 能被模塊化的不僅僅是JS了。
????? 開(kāi)發(fā)便捷，能替代部分 grunt/gulp 的工作，比如打包、壓縮混淆、圖片轉(zhuǎn)base64等。
????? 擴(kuò)展性強(qiáng)，插件機(jī)制完善，特別是支持 React 熱插拔（見(jiàn) react-hot-loader ）的功能讓人眼前一亮。
1.2 HJDev前端模塊規(guī)劃
Js合并的原則是：大小不能超過(guò)500KB
總體包括三類：
??????????? Vendor類文件，第三方類庫(kù)，命名規(guī)則是hj_vender_***.js，原則上同一個(gè)大框架的文件合并到一起，例如Angular、jQuery、mui等；
??????????? Common類文件，自定義的通用類庫(kù)，命名規(guī)則是hj_common_***.js，原則上目前所有自定義類庫(kù)可以合并成一個(gè)文件，大小不超過(guò)500KB；
??????????? 各模塊js文件，考慮到cssloader的樣式替換原理，css樣式文件不做合并；服務(wù)調(diào)用文件目前通用度比較低，各模塊調(diào)用情況差異比較大，故也不做統(tǒng)一合并，而是合并到各模塊js文件中打包壓縮。
1.3 Angular模塊模塊化整改
1.3.1 Html文件整改
????1、刪除所有Script標(biāo)簽引用的文件，改成在js文件中用require引用；
????2、增加dll文件引用；
????3、對(duì)于img標(biāo)簽中引用的相對(duì)路徑的圖片，改用angular參數(shù)綁定的形式引用；
1.3.2 js文件整改
????1、將angular、swiper等node.js管理的第三方類庫(kù)采用require方式引用；
????2、將所引用的css文件、js文件、子模塊html文件均用require方式引用；
????3、將自定義Angular模塊進(jìn)行模塊化整改；
var loginModule = angular.module("login", ['hj_User', 'hj_Service', 'ui.router', "hj_Comment"]);
loginModule.name = "login";
module.exports = loginModule.name;
????4、對(duì)于路由策略中子模塊html的引用方式，改用require方式引入，必要的時(shí)候考慮采用異步加載方式引入；
.state('lock', {?????????????????
????//手勢(shì)解鎖登錄頁(yè)面
????url: '/lock.html',
//templateProvider:function($q) {
??? //???var deferred = $q.defer();
??? //???require.ensure(['./lock.html'], function(require) {
??? //??????? var template = require('./../../html/account/lock.html');
??? //??????? deferred.resolve(template);
??? //???}, 'lock');
??? //???return deferred.promise;
??? //},
????template: require('./../../html/account/lock.html'),
????controller: require('./../public/hjCommon/geslock.js'),
????params:{
????????loginSet:"",
????????isLogin:""
????}
})
1.3.2.1 子模塊js文件單獨(dú)編寫(xiě)時(shí)require引用處理
1.3.3 css文件整改
1.3.3.1 background樣式中url引用整改
????????對(duì)于css樣式，要求將background樣式中url函數(shù)引用改成background-image:
????????原來(lái)寫(xiě)法
background:url("../image/ img_03") no-repeat rightcenter;
????????整改后寫(xiě)法：
background-image: url("../image/img_03.png");
1.3.3.2 background樣式中空鏈引用刪除
????????css樣式中有背景圖引用了空鏈接，會(huì)導(dǎo)致報(bào)錯(cuò)，例如：
.right_noIcon{
??? background: url('');
}
background-image:
url('');
解決方案：
??????????? 刪除空鏈接引用；
1.3.4 webpack打包配置
????????在webpack.config.js文件中，首先要引入html打包插件，然后進(jìn)行html與js文件的配置：
var HtmlWebpackPlugin = require('html-webpack-plugin');
????????在入口文件entry中如下配置，其中涉及子模塊js邏輯寫(xiě)在另一個(gè)js文件的需要采用[]包含路徑，：
//頁(yè)面入口文件配置
entry: {
????home : './m/js/home/home.js',
????product:? './m/js/home/productIndex.js',
????userinfo: './m/js/asset/userInfoIndex.js',
????login: ['./m/js/account/login.js'],??? },
在plugins一項(xiàng)中做如下配置：
????//Fund模塊打包
? ??new HtmlWebpackPlugin(
? ? {
????????//根據(jù)模板插入css/js等生成最終HTML
????????//?????????? favicon:'./src/img/favicon.ico', //favicon路徑
? ? ? ? //生成的html存放路徑，相對(duì)于path
????????filename:'html/home/fundProductIndex.html',???
? ? ? ? //html模板路徑
????????template:'m/html/home/productIndex.html',? ?
????????inject:?true,??? //允許插件修改哪些內(nèi)容，包括head與body
????????hash:?true,??? //為靜態(tài)資源生成hash值
????????//壓縮HTML文件
????????minify:{? ??
????????????removeComments:?false,??? //移除HTML中的注釋
????????????collapseWhitespace:?false??? //刪除空白符與換行符
????????},
????????chunks:['dll_angular','dll','common','product']
??????? }),
2 參考資料
前端js和css的壓縮合并之gulp
