resolve
resolve.alias 配置項通過別名來把原匯入路徑對映成乙個新的匯入路徑。例如使用以下配置：
// webpack alias 配置resolve:
}
當你通過 import button from 'components/button 匯入時，實際上被alias等價替換成了 import button from './src/components/button' 。
以上 alias 配置的含義是把匯入語句裡的 components 關鍵字替換成 ./src/components/ 。
這樣做可能會命中太多的匯入語句，alias 還支援$符號來縮小範圍到只命中以關鍵字結尾的匯入語句：
resolve:}
react$ 只會命中以 react 結尾的匯入語句，即只會把 import 'react' 關鍵字替換成 import '/path/to/react.min.js' 。
有一些第三方模組會針對不同環境提供幾分**。 例如分別提供採用 es5 和 es6 的2份**，這2份**的位置寫在 package.json 檔案裡，如下：
webpack 會根據 mainfields 的配置去決定優先採用那份**， mainfields 預設如下：
mainfields: ['browser', 'main']
webpack 會按照陣列裡的順序去 package.json 檔案裡尋找，只會使用找到的第乙個。
假如你想優先採用 es6 的那份**，可以這樣配置：
mainfields: ['jsnext:main', 'browser', 'main']
在匯入語句沒帶檔案字尾時，webpack 會自動帶上字尾後去嘗試訪問檔案是否存在。 resolve.extensions 用於配置在嘗試過程中用到的字尾列表，預設是：
extensions: ['.js', '.json']
也就是說當遇到 require('./data') 這樣的匯入語句時，webpack 會先去尋找 ./data.js 檔案，如果該檔案不存在就去尋找 ./data.json 檔案， 如果還是找不到就報錯。
假如你想讓 webpack 優先使用目錄下的 typescript 檔案，可以這樣配置：
extensions: ['.ts', '.js', '.json']
resolve.modules 配置 webpack 去哪些目錄下尋找第三方模組，預設是只會去 node_modules 目錄下尋找。 有時你的專案裡會有一些模組會大量被其它模組依賴和匯入，由於其它模組的位置分布不定，針對不同的檔案都要去計算被匯入模組檔案的相對路徑， 這個路徑有時候會很長，就像這樣 import '../../../components/button' 這時你可以利用 modules 配置項優化，假如那些被大量匯入的模組都在 ./src/components 目錄下，把 modules 配置成
modules:['./src/components','node_modules']
後，你可以簡單通過 import 'button' 匯入。
resolve.descriptionfiles 配置描述第三方模組的檔名稱，也就是 package.json 檔案。預設如下：
descriptionfiles: ['package.json']
resolve.enforceextension 如果配置為 true 所有匯入語句都必須要帶檔案字尾， 例如開啟前 import './foo' 能正常工作，開啟後就必須寫成 import './foo.js' 。
enforcemoduleextension 和 enforceextension 作用類似，但 enforcemoduleextension 只對 node_modules 下的模組生效。 enforcemoduleextension 通常搭配 enforceextension 使用，在 enforceextension:true 時，因為安裝的第三方模組中大多數匯入語句沒帶檔案字尾， 所以這時通過配置 enforcemoduleextension:false 來相容第三方模組
webpack學習筆記 配置plugins
plugin plugin 的配置很簡單，plugins 配置項接受乙個陣列，陣列裡每一項都是乙個要使用的 plugin 的例項，plugin 需要的引數通過建構函式傳入。const commonschunkplugin require webpack lib optimize commonschu...
webpack學習筆記 配置resolve
resolve resolve.alias 配置項通過別名來把原匯入路徑對映成乙個新的匯入路徑。例如使用以下配置 webpack alias 配置 resolve 當你通過 import button from components button 匯入時，實際上被alias等價替換成了 import...
webpack學習筆記 整體配置結構
之前的章節分別講述了每個配置項的具體含義，但沒有描述它們所處的位置和資料結構，下面通過乙份 來描述清楚 module.exports 如何輸出結果 在 webpack 經過一系列處理後，如何輸出最終想要的 output 配置模組相關 module noparse 不用解析和處理的模組 special...