1.entrycss
entry能夠是個字符串或數組或者是對象。
當entry是個字符串的時候,用來定義入口文件:node
當entry是個數組的時候,裏面一樣包含入口js文件,另一個參數能夠是用來配置webpack提供的一個靜態資源服務器,webpack-dev-server。webpack-dev-server會監控項目中每個文件的變化,實時的進行構建,而且自動刷新頁面:react
當entry是個對象的時候,咱們能夠將不一樣的文件構建成不一樣的文件,按需使用,好比在個人hello頁面中只要\引入hello.js便可:jquery
2.output
output參數是個對象,用於定義構建後的文件的輸出。其中包含path和filename:webpack
當咱們在entry中定義構建多個文件時,filename能夠對應的更改成[name].js用於定義不一樣文件構建後的名字。web
3.module
關於模塊的加載相關,咱們就定義在module.loaders中。這裏經過正則表達式去匹配不一樣後綴的文件名,而後給它們定義不一樣的加載器。好比說給less文件定義串聯的三個加載器(!用來定義級聯關係):正則表達式
此外,還能夠添加用來定義png、jpg這樣的圖片資源在小於10k時自動處理爲base64圖片的加載器:json
給css和less還有圖片添加了loader以後,咱們不只能夠像在node中那樣require js文件了,咱們還能夠require css、less甚至圖片文件:數組
可是須要知道的是,這樣require來的文件會內聯到 js bundle中。若是咱們須要把保留require的寫法又想把css文件單獨拿出來,可使用下面提到的[extract-text-webpack-plugin]插件。
在上面示例代碼中配置的第一個loaders咱們能夠看到一個叫作react-hot的加載器。個人項目是用來學習react寫相關代碼的,因此配置了一個react-hot加載器,經過它,能夠實現對react組件的熱替換。咱們已經在entry參數中配置了webpack/hot/only-dev-server
,因此咱們只要在啓動webpack開發服務器時開啓–hot參數,就可使用react-hot-loader了。在package.json文件中這樣定義:服務器
4.resolve
webpack在構建包的時候會按目錄的進行文件的查找,resolve屬性中的extensions數組中用於配置程序能夠自行補全哪些文件後綴:
而後咱們想要加載一個js文件時,只要require(‘common’)就能夠加載common.js文件了
6.externals
當咱們想在項目中require一些其餘的類庫或者API,而又不想讓這些類庫的源碼被構建到運行時文件中,這在實際開發中頗有必要。此時咱們就能夠經過配置externals參數來解決這個問題:
這樣咱們就能夠放心的在項目中使用這些API了:var jQuery = require(「jquery」);
7.context
當咱們在require一個模塊的時候,若是在require中包含變量,像這樣:
那麼在編譯的時候咱們是不能知道具體的模塊的。但這個時候,webpack也會爲咱們作些分析工做:
1.分析目錄:’./mods’;
2.提取正則表達式:’/^.*.js$/’;
因而這個時候爲了更好地配合wenpack進行編譯,咱們能夠給它指明路徑,像在cake-webpack-config中所作的那樣(咱們在這裏先忽略abcoption的做用):