一腹忽、常用配置項簡要說明
entry: //打包的入口文件，字符串/數(shù)組/對象
output://配置打包的結(jié)果辽聊，對象
fileName://定義輸出文件名解寝，字符串
path://定義輸出文件路徑，字符串
module: //定義對模塊的處理邏輯掸犬，對象
loader//數(shù)組
resolve://影響對模塊的解析，對象
extensions://自動補全識別后綴绪爸，數(shù)組
devServer://node.js構(gòu)建用于構(gòu)建本地服務(wù)器湾碎，對象
devtool://生產(chǎn)Source Maps，字符串
plugins://插件奠货，數(shù)組
1介褥、entry
可以是字符串:這個字符串表示需要打包的模塊的路徑,如果只有一個要打包的模塊，可以使用這種形式
可以是數(shù)組:當(dāng)需要將多個模塊打包成一個模塊递惋，可以使用這個方式柔滔。如果這些模塊之間不存在依賴，數(shù)組中值的順序沒有要求萍虽，如果存在依賴廊遍，則要將依賴性最高的模塊放在最后面。
例如：entry:["./app/one.js",".app/two.js"]可以是鍵值對形式的對象:當(dāng)需要分別打包成多個模塊時贩挣，可以使用這種方式，例如；
entry:{
module1:"./app/one.js",
module2:["./app/two.js","./app/three.js"]
}
注:當(dāng)entry是一個鍵值對形式的對象時王财，包名就是鍵名卵迂，output的filename不能是一個固定的值，因為每個包的名字不能一樣
字符串 或 數(shù)組內(nèi)的文件將合并輸出成一個js绒净；對象形式會以key name 分別輸出js
2见咒、output
output:{
publicPath://
path:,//絕對路徑，此路徑是你希望一次性打包的目錄
fialname:"[name].js"http://輸出文件名
crossOriginLoading:false//跨域加載
filename://每個輸出文件的名稱
}```
*__dirname挂疆，就是當(dāng)前webpack.config.js文件所在的絕對路徑
1. 它是一個對象
2. `path`:對應(yīng)一個絕對路徑改览，此路徑是你希望一次性打包的目錄
3. `publicPath`
在編譯時不知道最終輸出文件的 publicPath 的情況下，publicPath 可以留空缤言，并且在入口起點文件運行時動態(tài)設(shè)置：
__webpack_public_path__宝当。
__webpack_public_path__ = myRuntimePublicPath
// 其他的應(yīng)用程序入口
4. `filename`指定輸出文件名。
* 當(dāng)輸出一個文件時,filename為一個確定的字符串胆萧，如：
`output:{filename:"build.js"}`
* 當(dāng)輸出多個文件庆揩，filename不能為一個確定的字符串。為了讓每個文件有一個唯一的名字跌穗，需要用到下面的變量
`[id]` 會被chunk的id替換掉订晌。
`[name]` 會被chunk的name替換掉（如果沒有名字，會被id替換）蚌吸。
`[hash]` 會被編譯的hash替換掉锈拨。
`[chunkhash]` 會被 chunk hash替換掉。
>`[hash]`和`[chunkhash]`的區(qū)別：chunkhash可以根據(jù)文件內(nèi)容生成哈希值羹唠。
>不要在開發(fā)環(huán)境下使用 [chunkhash]奕枢，因為這會增加編譯時間。將開發(fā)和生產(chǎn)模式的配置分開肉迫，并在開發(fā)模式中使用 [name].js 的文件名验辞， 在生產(chǎn)模式中使用 [name].[chunkhash].js 文件名
>[具體查看](https://doc.webpack-china.org/guides/caching/)
5. `crossOriginLoading`此選項可以啟用跨域加載(cross-origin loading) chunk。
`false`- 禁用跨域加載
`anonymous` - 啟用跨域加載喊衫。當(dāng)使用 anonymous時跌造，發(fā)送不帶憑據(jù)(credential)的請求。
`use-credentials`- 啟用跨域加載族购。發(fā)送帶憑據(jù)(credential)的請求壳贪。
>更多跨域加載信息請查看 [MDN](https://developer.mozilla.org/en/docs/Web/HTML/Element/script#attr-crossorigin)
>默認(rèn)值：false
>參考 [library](https://doc.webpack-china.org/guides/author-libraries/)
>參考 [開發(fā)工具](https://doc.webpack-china.org/guides/development/#choosing-a-tool)
6. 其他:[webpack2中文-output](https://doc.webpack-china.org/concepts/output/#-usage-)中獲得更多的詳細(xì)信息
####三、module
1. 為對象寝杖，定義對模塊的處理邏輯
2. [module.rules](https://doc.webpack-china.org/concepts/loaders/)允許你在 webpack 配置中指定幾個 loader违施。它是一個數(shù)組，定義一系列l(wèi)oader瑟幕，這個數(shù)組中的每一項都是一個對象loader:
module: {
rules: [{
test: /.css$/,//（必須）正則表達(dá)式磕蒲，用于匹配到的文件
use: [{
loader/loaders://（必須）loader的名稱留潦，字符串或者數(shù)組，處理匹配到的文件（處理原則從右至左）辣往。如果只需要用到一個模塊加載器則用loader：string兔院，如果要使用多個模塊加載器，則使用loaders：array
include/exclude://（可選）手動添加必須處理的文件（文件夾）或屏蔽不需要處理的文件（文件夾）站削；
query：//（可選）為loaders提供額外的設(shè)置選項
}]
}]
}
3. module除了可以配置loaders以外還能配置其他的值,在[webpack的官網(wǎng)](http://webpack.github.io/docs/configuration.html#module)中獲得更多的信息
####四坊萝、resolve
1. `extensions` ： 非必須，默認(rèn)值`["", ".webpack.js", ".web.js", ".js"]`
* 告訴解析器在解析中能夠接受哪些擴展名
* 數(shù)組中的空字符串是為了讓每個模塊都能夠按照它們自己擴展名正確的被解析许起∈迹
* '.js'：請求js文件不帶擴展（如：`require('somecode')`）
2. 其他:[webpack的官網(wǎng)](http://webpack.github.io/docs/configuration.html#resolve)獲得更多信息
####五、devServer
1. 基于node.js構(gòu)建用于構(gòu)建本地服務(wù)器园细，安裝依賴`npm install --save-dev webpack-dev-server`
2. 配置項說明：
```
disableHostCheck: true// --host 0.0.0.0 時惦积，報 [invalid host header](https://segmentfault.com/a/1190000009425403)，需要改為true
historyApiFallback: //在開發(fā)單頁應(yīng)用時珊肃，依賴于HTML5 history API荣刑，如果設(shè)置為true，所有的跳轉(zhuǎn)將指向index.html
noInfo:// true,不加重一長串的打包信息
contentBase//默認(rèn)webpack-dev-server會為根文件夾提供本地服務(wù)器伦乔，如果想為另外一個目錄下的文件提供本地服務(wù)器厉亏，應(yīng)該在這里設(shè)置其所在目錄（本例設(shè)置到“public"目錄）
host: '0.0.0.0',//
port//默認(rèn)'8080'
inline//設(shè)置為true，熱加載
colors// 設(shè)置為true烈和，使終端輸出的文件為彩色的
*也可在package里的script里設(shè)置 *
六爱只、devtool
- 生成Source Maps（使調(diào)試更容易）
- 在webpack的配置文件中配置source maps，需要配置devtool招刹，它有以下四種不同的配置選項恬试，各具優(yōu)缺點，描述如下：
source-map//在一個單獨的文件中產(chǎn)生一個完整且功能完全的文件疯暑。這個文件具有最好的source map训柴，但是它會減慢打包文件的構(gòu)建速度；
cheap-module-source-map//在一個單獨的文件中生成一個不帶列映射的map妇拯，不帶列映射提高項目構(gòu)建速度幻馁，但是也使得瀏覽器開發(fā)者工具只能對應(yīng)到具體的行，不能對應(yīng)到具體的列（符號）越锈，會對調(diào)試造成不便仗嗦；
eval-source-map//使用eval打包源文件模塊，在同一個文件中生成干凈的完整的source map甘凭。這個選項可以在不影響構(gòu)建速度的前提下生成完整的sourcemap稀拐，但是對打包后輸出的JS文件的執(zhí)行具有性能和安全的隱患。不過在開發(fā)階段這是一個非常好的選項丹弱，但是在生產(chǎn)階段一定不要用這個選項德撬；
cheap-module-eval-source-map//這是在打包文件時最快的生成source map的方法铲咨，生成的Source Map 會和打包后的JavaScript文件同行顯示，沒有列映射砰逻，和eval-source-map選項具有相似的缺點鸣驱；
上述選項由上到下打包速度越來越快，不過同時也具有越來越多的負(fù)面作用蝠咆，較快的構(gòu)建速度的后果就是對打包后的文件的的執(zhí)行有一定影響。
在學(xué)習(xí)階段以及在小到中性的項目上北滥，
eval-source-map是一個很好的選項刚操，不過記得只在開發(fā)階段使用它，
cheap-module-eval-source-map方法構(gòu)建速度更快再芋，但是不利于調(diào)試菊霜，推薦在大型項目考慮da時間成本是使用。
七济赎、plugins
- 用來拓展Webpack功能鉴逞。
- 與loader的區(qū)別：loaders是在打包構(gòu)建過程中處理源文件（JSX，Scss司训，Less..）构捡，插件不直接操作單個文件，它直接對整個構(gòu)建過程其作用壳猜。
