《nodejs+gulp+webpack基礎實戰篇》課程筆記（六）--附加課

標籤：

一、多頁面分離資源引用,按需引用JS和css

　　我們前面實現了以下功能：1、建立了一個login模版（用到htmlWebpackPlugin）。2、分別把main.js和login.js、reg.js分開寫。3、學習了css載入器。我們通過webpack可以打包js檔案、自動注入js和CSS引用。

　　那麼我們要載入多頁面如何操作呢？現在我們就在/src/tpl 檔案夾下新件一個index.html檔案，在CSS加入index.css,隨便寫兩個樣式，然後在/src/下建立一個index.js，隨便寫兩個JS代碼，來測試下這個如何操作。

var HtmlWebpackPlugin = require(‘html-webpack-plugin‘);//萬事先引用var webpack = require("webpack");var ExtractTextPlugin = require("extract-text-webpack-plugin"); //初始化module.exports={    /*entry: [    //entry 是入口檔案，可以多個，代表要編譯那些js        ‘./src/main.js‘,        ‘./src/login.js‘,        ‘./src/reg.js‘,    ],*/    entry:{ //多節點設定        "main":‘./src/main.js‘,        "user":[‘./src/login.js‘,‘./src/reg.js‘],        "index":[‘./src/index.js‘]    },    output:{        path: __dirname+‘/build/js‘,      //輸出檔案夾        filename: ‘[name].js‘    //最終打包產生的檔案名稱    },    externals: {    ‘jquery‘: ‘jQuery‘   //或者 ‘jquery’:’$’    },    //載入css    module:{        loaders:[   //設定載入器            //{test:/\.css$/},loader:"style!css"}            {test:/\.css$/,loader:ExtractTextPlugin.extract("style","css")} // test屬性是一個正則，loader屬性知名載入器，!是串連符        ]    },plugins:[        new HtmlWebpackPlugin({            filename: __dirname + ‘/build/html/login.html‘,            template: __dirname + ‘/src/tpl/login.html‘,            inject:"body",            //hash:true            chunks:["main","user"]        }), //初始化這個對象    new HtmlWebpackPlugin({        filename: __dirname + ‘/build/html/index.html‘,        template: __dirname + ‘/src/tpl/index.html‘,        inject:"body",        //hash:true        chunks:["main","index"]    }), //初始化index.html        new webpack.ProvidePlugin({            $:‘jquery‘  //這裡請確保你的jquery已經安裝了。否則要路徑引用哦        }),        /*new webpack.optimize.CommonsChunkPlugin({            name:"user",            //entry定義的節點名            filename:"user.js"       //最終要產生到檔案名稱        }),*/        new ExtractTextPlugin("[name].css") //根據我們自己的檔案名稱來產生]}

　　然後產生看看，下面我們還將對檔案進行最佳化，消除一些冗餘。

二、用webpack的CommonsChunkPlugin提取公用代碼的3種方式

　　通過CommonsChunkPlgin這個外掛程式，我們可以把公用代碼提取出來，有下列三個辦法：

　　1、傳入字串參數　

new webpack.optimize.CommonsChunkPlugin("commons.js")//預設會把所有的入口節點的公用代碼給提取出來，產生一個common.js

　　2、數組格式

new webpack.optimize.CommonsChunkPlugin("common.js",["main","index","user"]),

　　3、（推薦）

new webpack.optimize.CommonsChunkPlugin({   name:"common",     //注意：不需要.JS尾碼   chunks:["main","user","index"]       //提取公用部分})

三、利用webpack在項目中使用jQuery外掛程式的正確姿勢

　　1、我們先用土辦法引用兩個jquery外掛程式，在先前用來做測試的login.html中的表單加上ID，對需要做驗證的文本筐加入代碼。

　　2、在login.js中寫如一個SCRIPT程式碼片段

require("./css/user.css");$.validator.setDefaults({    submitHandler: function() {        alert("驗證通過!");    }});$(document).ready(function() {    $("#txtUserLogin").formInputLetter({        len : 10,//限制輸入的字元個數        showId : "lenMsg"//顯示剩餘字元文字標籤的ID    });    $("#userfrm").validate();});

 

　　OK，node中webpack，看下，能實現我們預想的登入驗證效果，不過這不是我們想要的。。。

　　我們在LOGIN中加入下面的引用，

require("./lib/jquery.validate.min.js");require("./lib/jquery.formInputLetter.js");

　　而不再使用原來的土方法引用，這樣更方便和先進。

　　既然我們已經引用了，那麼我們也應該在WEBPACK.CONFIG.JS中寫入代碼，讓webpack能把這兩個外掛程式打包並分離公用部分。

著作權聲明：筆記整理者亡命小卒熱愛自由，崇尚分享。但是本筆記源自www.jtthink.com（程式員在囧途）沈逸老師的《前端開發速學成財(nodejs+gulp+webpack基礎實戰篇)》。本學習筆記小卒於部落格園首發， 如需轉載請尊重老師勞動，保留沈逸老師署名以及課程來源地址 .

上一課：《nodejs+gulp+webpack基礎實戰篇》課程筆記（五）-- 實戰演練，構建使用者登入

下一課：

 

　　

 

《nodejs+gulp+webpack基礎實戰篇》課程筆記（六）--附加課