詳解前端模塊化工具

詳解前端模塊化工具-webpackwebpack是一個(gè)modulebundler,拋開博大精深的漢字問題，我們暫且管他叫模塊管理工具’。隨著js能做的事情越來越多，瀏覽器、服務(wù)器，js似乎無處不在，這時(shí)，使日漸增多的js代碼變得合理有序就顯得尤為必要，也應(yīng)運(yùn)而生了很多模塊化工具。從服務(wù)器端到瀏覽器端，從原生的沒有模塊系統(tǒng)的'〈script〉'到基于Commonjs和AMD規(guī)范的實(shí)現(xiàn)到ES6modules。為了模塊化和更好的模塊化，我們總是走在探索的路上。modutas■//ithdspe-nderiG-iaswebpa匚kmodutas■//ithdspe-nderiG-iaswebpa匚kMCOULIl!?->VtERstaticass-sis但是這些實(shí)現(xiàn)模塊化的方法或多或少都有他們的缺點(diǎn)。比如說使用'〈script〉'標(biāo)簽導(dǎo)入js模塊，順序不好把握且我們需要自己梳理可能的沖突和依賴；使用Commonjs規(guī)范來解決問題，它使我們在服務(wù)器端的模塊得到了重用，但是在瀏覽器端，網(wǎng)絡(luò)的請求都是異步的，無法并行的require多個(gè)module。ES6modules的實(shí)現(xiàn)也只是一小部分，并且想要得到所有瀏覽器的支持，相比還是需要相當(dāng)?shù)囊欢螘r(shí)間。當(dāng)然靈活的模塊管理只是webpack的眾多特性之一，它還有眾多優(yōu)秀的特性：-它同時(shí)支持commonjs和AMD規(guī)范（甚至混合的形式）；-它可以打成一個(gè)完整的包，也可以分成多個(gè)部分，在運(yùn)行時(shí)異步加載（可以減少第一次加載的時(shí)間）；-依賴在編譯時(shí)即處理完畢，可以減少運(yùn)行時(shí)包的大?。?Loaders可以使文件在編譯時(shí)得到預(yù)處理，這可以幫我們做很多事情，比如說模板的預(yù)編譯，圖片的base64處理；-豐富的和可擴(kuò)展的插件可以適應(yīng)多變的需求。一、webpack詳解最近在學(xué)習(xí)ES6和React相關(guān)的知識(shí)，為了更加方便自己寫代碼，給自己寫了個(gè)腳手架generator-reactpack。生成的項(xiàng)目中可以看到一個(gè)基本的webpack.config.js文件：1.varwebpack=require('webpack');.module.exports={entry:['webpack/hot/only-dev-server',5../js/app.js'5.],output:{path:'./build',filename:'bundle.js'},module:{loaders:[{test:/\.js?$/,loaders:['react-hot','babel'],exclude:/node_modules/},{test:/\.js$/,exclude:/node_modules/,loader:'babel-loader'},{test:/\.css$/,loader:"style!css"},{test:/\.less/,loader:'style-loader!css-loader!less-loader'}TOC\o"1-5"\h\z]},resolve:{extensions:['','.js','.json']},\o"CurrentDocument"plugins: [newwebpack.NoErrorsPlugin()]};webpack.config.js文件通常放在項(xiàng)目的根目錄中，它本身也是一個(gè)標(biāo)準(zhǔn)的Commonjs規(guī)范的模塊。在導(dǎo)出的配置對象中有幾個(gè)關(guān)鍵的參數(shù)：entryentry可以是個(gè)字符串或數(shù)組或者是對象。當(dāng)entry是個(gè)字符串的時(shí)候，用來定義入口文件：entry:'./js/main.js'當(dāng)entry是個(gè)數(shù)組的時(shí)候，里面同樣包含入口js文件，另外一個(gè)參數(shù)可以是用來配置webpack提供的一個(gè)靜態(tài)資源服務(wù)器，webpack-dev-server。webpack-dev-server會(huì)監(jiān)控項(xiàng)目中每一個(gè)文件的變化，實(shí)時(shí)的進(jìn)行構(gòu)建，并且自動(dòng)刷新頁面：entry:['webpack/hot/only-dev-server','./js/app.js']當(dāng)entry是個(gè)對象的時(shí)候，我們可以將不同的文件構(gòu)建成不同的文件，按需使用，比如在我的hello頁面中只要'〈scriptsrc二'build/Profile.js'〉〈/script＞引入hello.js即可：entry:{hello:'./js/hello.js',form:'./js/form.js'}2.outputoutput參數(shù)是個(gè)對象，用于定義構(gòu)建后的文件的輸出。其中包含path和filename：output:{path:'./build',filename:'bundle.js'}當(dāng)我們在entry中定義構(gòu)建多個(gè)文件時(shí)，filename可以對應(yīng)的更改為[name].js用于定義不同文件構(gòu)建后的名字。module關(guān)于模塊的加載相關(guān)，我們就定義在module.loaders中。這里通過正則表達(dá)式去匹配不同后綴的文件名，然后給它們定義不同的加載器。比如說給less文件定義串聯(lián)的三個(gè)加載器(！用來定義級(jí)聯(lián)關(guān)系)：1.module:{2.loaders:[3.{test:/\.js?$/,loaders:['react-hot','babel'],exclude:/node_modules/},4.{test:/\.js$/,exclude:/node_modules/,loader:'babel-loader'},5.{test:/\.css$/,loader:"style!css"},6.{test:/\.less/,loader:'style-loader!css-loader!less-loader'}7.]8.}此外，還可以添加用來定義png、jpg這樣的圖片資源在小于10k時(shí)自動(dòng)處理為base64圖片的加載器：{test:/\.(png|jpg)$/,loader:'url-loader?limit=10000'}給css和less還有圖片添加了loader之后，我們不僅可以像在node中那樣requirejs文件了，我們還可以requirecss、less甚至圖片文件：require('./bootstrap.css');require('./myapp.less');varimg=document.createElement('img');img.src=require('./glyph.png');但是需要知道的是，這樣require來的文件會(huì)內(nèi)聯(lián)到j(luò)sbundle中。如果我們需要把保留require的寫法又想把css文件單獨(dú)拿出來，可以使用下面提到的[extract-text-webpack-plugin]插件。在上面示例代碼中配置的第一個(gè)loaders我們可以看到一個(gè)叫做react-hot的加載器。我的項(xiàng)目是用來學(xué)習(xí)react寫相關(guān)代碼的，所以配置了一個(gè)react-hot加載器，通過它，可以實(shí)現(xiàn)對react組件的熱替換。我們已經(jīng)在entry參數(shù)中配置了'webpack/hot/only-dev-server',所以我們只要在啟動(dòng)webpack開發(fā)服務(wù)器時(shí)開啟--hot參數(shù)，就可以使用react-hot-loader了。在package.json文件中這樣定義：1"scripts":{2"start":"webpack-dev-server--hot--progress--colors",3"build":"webpack--progress--colors"4}resolvewebpack在構(gòu)建包的時(shí)候會(huì)按目錄的進(jìn)行文件的查找,resolve屬性中的extensions數(shù)組中用于配置程序可以自行補(bǔ)全哪些文件后綴：resolve:{extensions:['','.js','.json']}然后我們想要加載一個(gè)js文件時(shí)，只要require('common')就可以加載common.js文件了。pluginwebpack提供了[豐富的組件]用來滿足不同的需求，當(dāng)然我們也可以自行實(shí)現(xiàn)一個(gè)組件來滿足自己的需求。在我的項(xiàng)目里面沒有特殊的需求，于是便只是配置了NoErrorsPlugin插件，用來跳過編譯時(shí)出錯(cuò)的代碼并記錄，使編譯后運(yùn)行時(shí)的包不會(huì)發(fā)生錯(cuò)誤：plugins:[newwebpack.NoErrorsPlugin()]externals當(dāng)我們想在項(xiàng)目中require一些其他的類庫或者API,而又不想讓這些類庫的源碼被構(gòu)建到運(yùn)行時(shí)文件中，這在實(shí)際開發(fā)中很有必要。此時(shí)我們就可以通過配置externals參數(shù)來解決這個(gè)問題：1externals:{2"jquery":"jQuery"3}這樣我們就可以放心的在項(xiàng)目中使用這些API了：varjQuery=require("jquery");context當(dāng)我們在require一個(gè)模塊的時(shí)候，如果在require中包含變量，像這樣：1require("./mods/"+name+".js");那么在編譯的時(shí)候我們是不能知道具體的模塊的。但這個(gè)時(shí)候，webpack也會(huì)為我們做些分析工作：1.分析目錄：'./mods'；2?提取正則表達(dá)式:'廠.*\.js$/'；于是這個(gè)時(shí)候?yàn)榱烁玫嘏浜蟱enpack進(jìn)行編譯，我們可以給它指明路徑，像在cake-webpack-config中所做的那樣(我們在這里先忽略abcoption的作用)：varcurrentBase=process.cwd();varcontext=abcOptions.options.context?abcOptions.options.context:path.isAbsolute(entryDir)?entryDir:path.join(currentBase,entryDir);二、 whywebpack？webpack與gulp并不矛盾，甚至一起使用會(huì)得到最大化的利益，webpack與gulp。使用webpack進(jìn)行assets編譯，使用gulp進(jìn)行打包似乎就是為了讓它們各司其職，用其所長。關(guān)于工具的定位webpack的定位是modulebundler，作為模塊化工具，它的競爭對手看起來更像是［browserify］，而不是［Gulp］，基于流的自動(dòng)化構(gòu)建工具。然而事實(shí)也是這樣的。功能和使用方式上的不同webpack提供了一些非常實(shí)用的功能，像在前面我們體會(huì)到的那些，比如說圖片的處理，resolve的處理，分開構(gòu)建［webpack-code-splitting］等等。許多其他工具需