1屁使、webpack在構(gòu)建包的時(shí)候會(huì)按目錄進(jìn)行文件的查找减细，resolve屬性中的extensions數(shù)組中用于配置程序可以自行補(bǔ)全哪些文件后綴匆瓜。
resolve: {
extensions: ['', '.js', '.json']
}
然后我們想要加載一個(gè)js文件時(shí)，只要require(‘common’)就可以加載common.js文件了。
2驮吱、當(dāng)我們想在項(xiàng)目中require一些其他的類(lèi)庫(kù)或者API茧妒，而又不想讓這些類(lèi)庫(kù)的源碼被構(gòu)建到運(yùn)行時(shí)文件中，這在實(shí)際開(kāi)發(fā)中很有必要左冬。此時(shí)我們就可以通過(guò)配置externals參數(shù)來(lái)解決這個(gè)問(wèn)題：
externals: {
"jquery": "jQuery"
}
這樣我們就可以放心的在項(xiàng)目中使用這些API了：var jQuery = require("jQuery");
3桐筏、webpack核心原理
- 一切皆模塊
- 按需加載
4、開(kāi)發(fā)模式和生產(chǎn)模式
"scripts": {
// 運(yùn)行npm run build 來(lái)編譯生成生產(chǎn)模式下的bundles
"build": "webpack --config webpack.config.prod.js",
// 運(yùn)行npm run dev來(lái)生成開(kāi)發(fā)模式下的bundles以及啟動(dòng)本地server
"dev": "webpack-dev-server"
}
5拇砰、webpack CLI 和 webpack-dev-server
向webpack-dev-server傳入?yún)?shù)的方式：
- 通過(guò)webpack.config.js文件的"devServer"對(duì)象
- 通過(guò)CLI選項(xiàng)
// 通過(guò)CLI傳參
webpack-dev-server --hot --inline
// 通過(guò)webpack.config.js傳參
devServer: {
inline: true, // 為入口頁(yè)面添加“熱加載”功能
// 開(kāi)啟“熱替換”梅忌，即嘗試重新加載組件改變的部分（而不是重新加載整個(gè)頁(yè)面）
hot:true
}
如果兩個(gè)參數(shù)都傳入，當(dāng)資源改變時(shí)除破，webpack-dev-server將會(huì)先嘗試HRM（即熱替換）牧氮，如果失敗則重新加載整個(gè)入口頁(yè)面。
// 當(dāng)資源發(fā)生改變瑰枫，以下三種方式都會(huì)生成新的bundle蹋笼，但是又有區(qū)別：
// 1. 不會(huì)刷新瀏覽器
$ webpack-dev-server
//2. 刷新瀏覽器
$ webpack-dev-server --inline
//3. 重新加載改變的部分，HRM失敗則刷新頁(yè)面
$ webpack-dev-server --inline --hot
6躁垛、entry：字符串，數(shù)組和對(duì)象
Enter配置項(xiàng)告訴Webpack應(yīng)用的根模塊或起始點(diǎn)在哪里圾笨，它的值可以是字符串教馆、數(shù)組或?qū)ο蟆＿@看起來(lái)可能令人困惑擂达，因?yàn)椴煌?lèi)型的值有著不同的目的土铺。
（1）數(shù)組類(lèi)型
如果你想添加多個(gè)彼此不互相依賴(lài)的文件，你可以使用數(shù)組格式的值板鬓。
例如悲敷，你可能在html文件里引用了“googleAnalytics.js”文件，可以告訴Webpack將其加到bundle.js的最后俭令。
（2）對(duì)象
現(xiàn)在后德，假設(shè)你的應(yīng)用是多頁(yè)面的（multi-page application）而不是SPA，有多個(gè)html文件（index.html和profile.html）抄腔。然后你通過(guò)一個(gè)對(duì)象告訴Webpack為每一個(gè)html生成一個(gè)bundle文件瓢湃。
以下的配置將會(huì)生成兩個(gè)js文件：indexEntry.js和profileEntry.js分別會(huì)在index.html和profile.html中被引用。
用法：
//profile.html
<script src=”dist/profileEntry.js”></script>
//index.html
<script src=”dist/indexEntry.js”></script>
7赫蛇、output：“path”項(xiàng)和“publicPath”項(xiàng)
（1）path：告訴Webpack結(jié)果存儲(chǔ)在哪里
（2）publicPath：被許多Webpack的插件用于在生產(chǎn)模式下更新內(nèi)嵌到css绵患、html文件里的url值
8、loader自身的配置
9悟耘、加載器（loader）和插件（plugins）
Loader處理單獨(dú)的文件級(jí)別并且通常作用于包（bundle）生成之前或生成的過(guò)程中落蝙。
而插件則是處理包（bundle）或者chunk級(jí)別，且通常是bundle生成的最后階段。一些插件如commonschunkplugin甚至更直接修改bundle的生成方式筏勒。
