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