#### Entry
如果entry是一個object，就代表有多個入口文件（就會出現多個chunk），chunk的名稱就是object里的key。
#### Output
多個chunk輸出時，需要借助模板變量來區分。
```
filename: '[name].js' //模板變量
```
* id：chunk的唯一標識，從0開始
* name：chunk的名稱
* hash：chunk唯一標識的hash值
* chunkhash：chunk內容的hash值
(chunk)hash值還可以指定位數：`filename: '[chunkhash:8]'`
chunkFilename：用于按需加載
```
chunkFilename: [id].js
//入口
//假設async是需要異步加載的模塊
onclick = () => import('./async.js').then(data => console.log(data));
//打開瀏覽器，你會發現你實際加載的會是0.js
```
publicPath：按需加載和需要單獨提取的資源（如使用url-loader和file-loader的圖片）的基本路徑。publicPath默認是參考自html的路徑的，比如
```
css
----main.css
image
----bk.jpg(很大)
js
----main.js
----async.js
pages
----index.html
```
我在main的js中異步加載async.js，實際上打完包后它加載的是`pages/0.js`，而實際上該目錄下沒有這個js。這時我就要將publicPath修改為`../`。其他資源與異步加載的js同理，都需要將publicPath修改成正常路徑，比如：
```
//css文件
background: url('../image/bk.jpg')
//js
import from '../main.css';
```
打包后，css將變成`background: url('絕對路徑/pages/bk.jpg')`，你需要將publicPath修改成`../image/`，css就變成了`background: url('絕對路徑/image/bk.jpg')`。
webpack的按需加載的原理就是使用Jsonp，動態向html中插入一段js代碼來異步請求資源。
#### Module
#### Resolve
webpack會在啟動后從entry出發找到所有模塊，這會影響打包速度
alias：通過別名來更改導入的路徑
```
resolve: {
alias: {
components: './src/components/'
}
}
//js
import Button from 'components/button'
//就變成了
import Button from './src/components/button
```
extensions：導入語句沒有后綴時，webpack會自動帶上后綴去訪問文件，在這里配置后綴
```
resolve: {
extensions: ['.js', '.json']
}
```
modules：告訴webpack去哪些目錄下尋找第三方模塊，默認是node_modules。如果我們自己的某些模塊被其他地方大量引用，可能會出現
`import Button from '../../../common/component/button'`這樣的情況，我們也可以把Button當成第三方模塊修改默認的引入路徑
```
resolve: {
modules: ['./common/component', 'node_modules']
}
//js
import Button from 'button'
```
#### 其他
Devtool：告訴webpack如何生存source map，默認是false不生成。
```
module.exports = {
devtool: 'source-map'
}
```
Externals：告訴webpack哪些模塊不用被打包進來，多用于第三方庫或框架，不用將它們打包進來以減少模塊體積，直接使用src引入即可，在代碼里你仍可以使用模塊的方式引入它們
```
module.exports = {
externals: {
'react': 'React',
'react-dom': 'ReactDOM'
}
}
//html
<script src="//cdn/react.js"/>
<script src="//cdn/react-dom.js"/>
//js
//仍然可以這樣引入
import React from 'react';
import ReactDOM from 'react-dom';
```
#### 配置類型
除了導出一個對象外，webpack還支持導出一個函數，return一個對象或者return promise（用于含有異步操作）。
```
module.exports = function(env = {}, argv) {
const plugins = [];
return {
modules: {},
plugins,
devtool: 'source-map',
externals: {}
}
}
module.exports = function(env = {}, argv) {
return new Promise((resolve, reject) => {
//你還可以做其他的異步操作，直到所有異步操作完成后，resovle webpack的配置
setTimeout(() => {
resolve({
modules: {},
plugins,
devtool: 'source-map',
externals: {}
})
})
})
}
```
