建站
咨詢
售后
建站咨詢
新聞中心
webpack是一個(gè)module bundler,拋開博大精深的漢字問題，我們暫且管他叫'模塊管理工具 '。隨著js能做的事情越來越多，瀏覽器、服務(wù)器，js似乎無處不在，這時(shí)，使日漸增多的js代碼變得合理有序就顯得尤為必要，也應(yīng)運(yùn)而生了很多模塊化工 具。從服務(wù)器端到瀏覽器端，從原生的沒有模塊系統(tǒng)的`引入hello.js即可：
1 entry: {
2 hello: './js/hello.js',
3 form: './js/form.js'
4 }
2.output
output參數(shù)是個(gè)對(duì)象，用于定義構(gòu)建后的文件的輸出。其中包含path和filename：
1 output: {
2 path: './build',
3 filename: 'bundle.js'
4 }
當(dāng)我們?cè)趀ntry中定義構(gòu)建多個(gè)文件時(shí)，filename可以對(duì)應(yīng)的更改為[name].js用于定義不同文件構(gòu)建后的名字。
3.module
關(guān)于模塊的加載相關(guān)，我們就定義在module.loaders中。這里通過正則表達(dá)式去匹配不同后綴的文件名，然后給它們定義不同的加載器。比如說給less文件定義串聯(lián)的三個(gè)加載器（！用來定義級(jí)聯(lián)關(guān)系）：
- 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'}
- ]
- }
此外，還可以添加用來定義png、jpg這樣的圖片資源在小于10k時(shí)自動(dòng)處理為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來的文件會(huì)內(nèi)聯(lián)到 js bundle中。如果我們需要把保留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)對(duì)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 }
4.resolve
webpack在構(gòu)建包的時(shí)候會(huì)按目錄的進(jìn)行文件的查找，resolve屬性中的extensions數(shù)組中用于配置程序可以自行補(bǔ)全哪些文件后綴：
1 resolve:{
2 extensions:['','.js','.json']
3 }
然后我們想要加載一個(gè)js文件時(shí)，只要require('common')就可以加載common.js文件了。
5.plugin
webpack提供了[豐富的組件]用來滿足不同的需求，當(dāng)然我們也可以自行實(shí)現(xiàn)一個(gè)組件來滿足自己的需求。在我的項(xiàng)目里面沒有特殊的需求，于是便只是配置了NoErrorsPlugin插件，用來跳過編譯時(shí)出錯(cuò)的代碼并記錄，使編譯后運(yùn)行時(shí)的包不會(huì)發(fā)生錯(cuò)誤：
1 plugins: [
2 new webpack.NoErrorsPlugin()
3 ]
6.externals
當(dāng)我們想在項(xiàng)目中require一些其他的類庫(kù)或者API，而又不想讓這些類庫(kù)的源碼被構(gòu)建到運(yùn)行時(shí)文件中，這在實(shí)際開發(fā)中很有必要。此時(shí)我們就可以通過配置externals參數(shù)來解決這個(gè)問題：
1 externals: {
2 "jquery": "jQuery" 3 }
這樣我們就可以放心的在項(xiàng)目中使用這些API了：var jQuery = require("jquery");
7.context
當(dāng)我們?cè)趓equire一個(gè)模塊的時(shí)候，如果在require中包含變量，像這樣：
1 require("./mods/" + name + ".js");
那么在編譯的時(shí)候我們是不能知道具體的模塊的。但這個(gè)時(shí)候，webpack也會(huì)為我們做些分析工作：
1.分析目錄：'./mods'；
2.提取正則表達(dá)式：'/^.*\.js$/'；
于是這個(gè)時(shí)候?yàn)榱烁玫嘏浜蟱enpack進(jìn)行編譯，我們可以給它指明路徑，像在cake-webpack-config中所做的那樣（我們?cè)谶@里先忽略abcoption的作用）：
1 var currentBase = process.cwd();
2 var context = abcOptions.options.context ? abcOptions.options.context :
3 path.isAbsolute(entryDir) ? entryDir : path.join(currentBase, entryDir);
二、why webpack？
webpack與gulp并不矛盾，甚至一起使用會(huì)得到***化的利益，webpack與gulp。使用webpack進(jìn)行assets編譯，使用gulp進(jìn)行打包似乎就是為了讓它們各司其職，用其所長(zhǎng)。
關(guān)于工具的定位
webpack的定位是module bundler，作為模塊化工具，它的競(jìng)爭(zhēng)對(duì)手看起來更像是[browserify]，而不是[Gulp]，基于流的自動(dòng)化構(gòu)建工具。然而事實(shí)也是這樣的。
功能和使用方式上的不同
webpack提供了一些非常實(shí)用的功能，像在前面我們體會(huì)到的那些，比如說圖片的處理，resolve的處理，分開構(gòu)建[webpack-code-splitting]等等 。 許多其他工具需要插件的功能，webpack只要配置一下就可以了。
有時(shí)候一個(gè)東西到底怎樣，自己折騰一遍或許體會(huì)就更加深刻了。
三、拓展閱讀
- [webpack]
- [cake-webpack-config]
- [webpack-howto]
- [webpack-compared]
網(wǎng)頁(yè)題目：詳解前端模塊化工具-webpack
標(biāo)題來源：http://www.dlmjj.cn/article/dpdgjso.html
