[TOC]
一渤早、webpack是干什么的
二卤材、安裝webpack
三、核心概念
- Entry 入口
- Module 模塊
在webpack中一切皆模塊竣况，一個(gè)文件即一個(gè)模塊克婶。webpack從entry配置的入口文件開始遞歸找出所有的文件依賴。 - Chunk 代碼塊
一個(gè)Chunk由多個(gè)模塊組合而成丹泉，用于代碼合并和分割鸠补。 - Loader 模塊轉(zhuǎn)換器
將模塊的原內(nèi)容按照需求轉(zhuǎn)化成新內(nèi)容。 - Plugin 擴(kuò)展插件
在webpack構(gòu)建流程中的特定時(shí)機(jī)注入擴(kuò)展邏輯嘀掸，來(lái)改變構(gòu)建結(jié)果紫岩。 - Output 輸出結(jié)果
在webpack經(jīng)過(guò)一系列處理并得到最終想要的代碼后輸出結(jié)果。
四睬塌、webpack常用的配置
按照配置所影響的功能劃分泉蝌。
4.1 Entry: 配置模塊的入口
Entry數(shù)據(jù)類型
| 類型 | 例子 | 含義 | Chunk名稱 |
|---|---|---|---|
| string | './src/app.jsx' | 入口模塊的文件路徑，可以是相對(duì)路徑 | main |
| array | ['./src/app1.jsx','./src/app2.jsx'] | 入口模塊的文件路徑揩晴，可以是相對(duì)路徑 | main |
| object | { app: './src/app.jsx',app2: './src/app2.jsx'} | 配置多個(gè)入口勋陪，每個(gè)入口生成一個(gè)Chunk | app app2 |
4.2 Output: 配置如何輸出最終想要的代碼。
4.2.1 filename
配置輸出文件的名稱硫兰，string類型诅愚。
按照輸出文件個(gè)數(shù)，取相應(yīng)的名字劫映。
如果只有一個(gè)輸出文件违孝，則可以取一個(gè)靜態(tài)名稱 filename: 'bundle.js'
如果是多個(gè) 根據(jù)Chunk的名稱區(qū)分輸出的文件名。例如：filename: '[name].js'
[name]代表用內(nèi)置的name取替換[name]泳赋，這時(shí)候我們可以將它看作一個(gè)字符串模板函數(shù)雌桑。內(nèi)置變量除了name，還包括：
| 變量名 | 含義 |
|---|---|
| id | Chunk的唯一標(biāo)識(shí)祖今，從0開始 |
| name | Chunk的名稱 |
| hash | Chunk的唯一標(biāo)識(shí)的hash值校坑，其中[hash:8]代表取8位Hash值 |
| chunkHash | Chunk內(nèi)容的hash值 |
4.2.2 chunkFilename
配置無(wú)入口的Chunk在輸出時(shí)文件名稱。它只用于指定在運(yùn)行過(guò)程中生成的Chunk在輸出時(shí)的名稱千诬。會(huì)在運(yùn)行時(shí)生成Chunk的常見場(chǎng)景包括：使用CommonChunkPlugin耍目、使用import('path/to/module')動(dòng)態(tài)加載等。chunkFilename支持和filename一致的內(nèi)置變量徐绑。
4.2.3 path
output.path配置輸出文件存放在本地的目錄邪驮，必須是string類型的絕對(duì)路徑。通常是Node.js的path模塊去獲取絕對(duì)路徑泵三。
path: path.resolve(__dirname, 'dist_[hash]')
4.2.4%7D%7B*%7D)
publicPath
4.2.5 crossOrginLoading
4.2.6 libaryTarget 和 library
4.2.7 libaryExport
4.3 Module: 配置處理模塊的規(guī)則耕捞。
4.3.1 配置Loader
rules配置模塊的讀取和解析規(guī)則，array類型烫幕。數(shù)組里每一項(xiàng)都描述了如何處理部分文件俺抽。配置一項(xiàng)rules時(shí)大致可通過(guò)以下方式來(lái)完成。
- 條件匹配：通過(guò)test较曼、include磷斧、exclude三個(gè)配置項(xiàng)來(lái)選中Loader要應(yīng)用的規(guī)則的文件。
- 應(yīng)用規(guī)則：對(duì)選中的文件通過(guò)use配置項(xiàng)來(lái)應(yīng)用Loader捷犹，可以只應(yīng)用一個(gè)Loader或者按照從后往前的順序應(yīng)用一組Loader弛饭，同時(shí)可以分別向Loader傳入?yún)?shù)。
- 重置順序：一組Loader的執(zhí)行順序默認(rèn)是從右往左執(zhí)行的萍歉，通過(guò)enforce選項(xiàng)可以將其中一個(gè)Loader的執(zhí)行順序放到最前或者最后(enforce: 'pre' 將該Loader的執(zhí)行順序放到最前侣颂。 ‘post’放到最后)。
4.4 Resolve: 配置尋找模塊的規(guī)則枪孩。
4.4.1 alias
配置項(xiàng)通過(guò)別名來(lái)將導(dǎo)入路徑映射成一個(gè)新的導(dǎo)入路徑憔晒。例如使用以下配置：
resolve: {
alias: {
components: './src/components/'
}
}
當(dāng)通過(guò)import Button from 'components/button'導(dǎo)入時(shí)，實(shí)際上被alias等價(jià)替換成了import Button from './src/components/button'
4.4.2 mainFields
優(yōu)先配置哪份代碼
4.4.3 extensions
如果導(dǎo)入語(yǔ)句沒加后綴名蔑舞，例如 require('./data')拒担。
配置extensions: ['.ts', '.js', '.json']，會(huì)優(yōu)先加上ts后綴攻询，如果沒找到這樣的文件从撼，再去匹配js文件，以此類推钧栖，如果沒找到低零，報(bào)錯(cuò)。
4.4.4 modules
配置webpack去哪些目錄下尋找第三方模塊拯杠，默認(rèn)只會(huì)去node_modules目錄下尋找毁兆。
4.5 Plugins: 配置擴(kuò)展插件。
plugins配置項(xiàng)接收一個(gè)數(shù)組阴挣，數(shù)組里的每一項(xiàng)都是一個(gè)要使用的Plugin的實(shí)例气堕，Plugin需要的參數(shù)通過(guò)構(gòu)造函數(shù)傳入。
const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
module.exports = {
plugins: [
new CommonsChunkPlugin({
name: 'common',
chunks: ['a', 'b']
})
]
}
4.6 DevServer: 配置DevServer畔咧。
通過(guò)DevServer啟動(dòng)Webpack時(shí)茎芭，配置文件里的devServer才會(huì)生效，因?yàn)檫@些參數(shù)所對(duì)應(yīng)的功能都是DevServer提供的誓沸，Webpack本身并不認(rèn)識(shí)devServer配置項(xiàng)梅桩。
4.6.1 hot 配置是否啟用模塊熱替換功能。
DevServer的默認(rèn)行為是發(fā)現(xiàn)源代碼被更新后通過(guò)自動(dòng)刷新整個(gè)頁(yè)面來(lái)做到實(shí)時(shí)預(yù)覽拜隧，開啟模塊替換功能后宿百，將在不刷新整個(gè)頁(yè)面的情況下通過(guò)用新模塊替換老模塊來(lái)做到實(shí)時(shí)預(yù)覽趁仙。
// 是否開啟模塊熱替換功能
hot: true
4.6.2 inline
4.6.3 historyApiFallback
// 是否開發(fā)HTML5 History API網(wǎng)頁(yè)
historyApiFallback: true
4.6.4 contentBase
// 配置DevServer HTTP服務(wù)器的文件根目錄
contentBase: path.join(__dirname, 'public')
4.6.5 headers
4.6.6 host
4.6.7 port
4.6.8 allowedHosts
4.6.9 disableHostCheck
4.6.10 https
// 是否開啟HTTPS模式
https: false
4.6.11 clientLogLevel
4.6.12 compress
// 是否開啟Gzip壓縮
compress: true
4.6.13 open
4.7 其他配置項(xiàng):
4.7.1 Target
target: 'web', // 瀏覽器，默認(rèn)
target: 'webworker', // WebWorker
target: 'node', // Node.js,使用`require`語(yǔ)句加載Chunk代碼
target: 'async-node', // Node.js, 異步加載Chunk代碼
target: 'node-webkit', // nw.js
target: 'electron-main', // electron垦页，主線程
target: 'electron-renderer', // electron雀费，渲染線程
4.7.2 Devtool
devtool: 'source-map'
4.7.3 Watch 和 WatchOptions
watch: true,
watchOptions: { // 監(jiān)聽模式選項(xiàng)
// 不監(jiān)聽的文件或文件夾，支持正則匹配痊焊。默認(rèn)為空
ignored: /node_modules/,
// 監(jiān)聽到變化發(fā)生后盏袄，等300ms再執(zhí)行動(dòng)作，截流薄啥，防止文件更新太快導(dǎo)致重新編譯頻率太快辕羽。默認(rèn)為300ms
aggregateTimeout: 300,
// 不停地詢問(wèn)系統(tǒng)指定的文件有沒有發(fā)生變化，默認(rèn)每秒詢問(wèn)1000次
poll: 1000
}
4.7.4 Externals
// 使用來(lái)自JavaScript運(yùn)行環(huán)境提供的全局變量
externals: {
jquery: 'jQuery'
}
4.7.5 ResolveLoader
用來(lái)告訴webpack如何去尋找Loader垄惧，因?yàn)樵谑褂肔oader時(shí)是通過(guò)其包名去引用的刁愿，Webpack需要根據(jù)配置的Loader包名去找到Loader的實(shí)際代碼，以調(diào)用Loader去處理源文件到逊。
默認(rèn)配置如下：
module.exports = {
resolveLoader: {
// 去哪個(gè)目錄下尋找Loader
modules: ['node_modules'],
// 入口文件的后綴
extensions: ['.js', '.json'],
// 指明入口文件位置的字段
mainFields: ['loader', 'main']
}
}
該配置常用于加載本地的Loader
