在開(kāi)發(fā)過(guò)程中庶骄，webpack是一一款模塊化開(kāi)發(fā)編譯打包的一款利器澳眷，下面我們對(duì)webpack的一些配置進(jìn)行一些解剖式的學(xué)習(xí)吧习柠！
var webapck =require("webpack); var path=require("path"); modules.export={ devtool: 'source-map', entry: [ './src/index' ], output: { path: path.join(__dirname, 'dist'), filename: 'bundle.js', publicPath: '/static/' }, }在上面這部分代碼中：
devtool:
entry
bundle的入口文件
- 如果傳入一個(gè)字符串蒜焊，這個(gè)字符串就會(huì)被解析為啟動(dòng)時(shí)加載的模塊倒信。
- 如果傳入個(gè)數(shù)組，所有模塊都是啟動(dòng)時(shí)加載泳梆，模塊導(dǎo)出到最后一個(gè)里面,即把多個(gè)文件打包合并成一個(gè)
entry: ["./entry1", "./entry2"] - 如果傳入一個(gè)對(duì)象鳖悠，就會(huì)創(chuàng)建多個(gè)輸入包文件，對(duì)象鍵值就chunk的name优妙，值可以是字符串或者是數(shù)組乘综。
entry: {
page1: "./page1",
page2: ["./entry1", "./entry2"]
},
output: {
// 當(dāng)使用多入口文件時(shí)候，要確保在output.filename使用[name]或者[id]
filename: "[name].bundle.js",
chunkFilename: "[id].bundle.js"
}
}
注意: 沒(méi)有別的專門來(lái)配置入口點(diǎn)的選項(xiàng)套硼。如果你需要一個(gè)專門來(lái)配置入口點(diǎn)的配置對(duì)象卡辰，你需要用到××多個(gè)配置對(duì)象××
output
output是影響編譯輸出的選項(xiàng)。output選項(xiàng)告訴webpack怎么把編譯文件寫(xiě)入磁盤邪意。注意九妈，雖然可以有很多輸入口，但是只有一個(gè)輸出配置
如果使用了哈希([hash] 或者 [chunkhash]), 需要確保有一個(gè)一致的模塊順序抄罕。使用OccurenceOrderPlugin插件或者 recordsPath允蚣。(譯者：參看這個(gè)issue)
output.filename
指定輸出到硬盤的文件的文件名。這里必須是相對(duì)路徑
單一入口：
{
entry: "./src/app.js",
output: {
filename:"bundle.js",
path:"./build"
}
}
多入口
如果帶有多個(gè)入口點(diǎn)呆贿，或者使用了CommonsChunkPlugin這樣的插件嚷兔，你應(yīng)該使用替換符來(lái)為每個(gè)文件命名一個(gè)為一個(gè)名字。
[name] 被chunk的名字替換做入。
[hash] 被編譯器hash替換冒晰。
[chunkhash]被chunk的hash替換
entry: {
app: './src/app.js',
search: './src/search.js'
},
output: {
filename: '[name].js',
path: __dirname + '/built'
}
}
// 輸出到磁盤: ./built/app.js, ./built/search.js
output.path
絕對(duì)路徑（required）
[hash]被編譯后 文件的hash替換
output.publicPath
publicPath指定了一個(gè)在瀏覽器中被引用的URL地址。對(duì)于使用 <script>和<link>加載器竟块，當(dāng)文件路徑不同于他們的本地磁盤路徑(由path指定)時(shí)候壶运，publicPath被用來(lái)作為href或者url指向該文件。這種做法在你需要將靜態(tài)文件放在不同的域名或者cdn上面的時(shí)候是很有用的浪秘。與path搭配使用[hash]就能做好緩存方案了蒋情。
config.js
path: "/home/proj/public/assets",
publicPath: "/assets/"
}```
index.html
<head>
<link href="/assets/spinner.gif"/>
</head>
如果使用CDN和hash的例子
```output: {
path: "/home/proj/cdn/assets/[hash]",
publicPath: "http://cdn.example.com/assets/[hash]/"
}```
注: 萬(wàn)一最終輸出文件的publicPath在編譯的時(shí)候不知道，那么你可以不填耸携，動(dòng)態(tài)的在運(yùn)行時(shí)添加也可以棵癣。如果在編譯過(guò)程你不知道publicPath你可以忽略他，然后在你的入口文件里面添加上這個(gè)字段就可以了__webpack_public_path__夺衍。
```__webpack_public_path__ = myRuntimePublicPath
// rest of your application entry```
##### output.chunkFilename
非入口chunk的文件名狈谊，作為一個(gè)相對(duì)路徑放在output.path里面。
[id] 替換chunk的id.
[name] 替換chunk的名字 (or 如果沒(méi)有名字就用id替換).
[hash] 替換編譯的hash.
[chunkhash] 替換chunk的hash.
##### output.sourceMapFilename
js文件的sourceMap的文件名，也同樣在output路徑下面河劝。
[file] 替換js文件的文件名.
[id] 替換chunk的id.
[hash] 替換編譯的hash.
默認(rèn): "[file].map"
### module
###### module.loaders
自動(dòng)引用的加載器的數(shù)組
每個(gè)元素有這些選項(xiàng)
- test:必須滿足的條件
- exclude:不滿足的條件
- include:必須滿足的條件
- loader:用“!"隔開(kāi)多個(gè)loader
- loaders：多個(gè)loader
重要信息：這里的loader解析了他們應(yīng)用相關(guān)的資源壁榕，這意味著他們不需要解析配置過(guò)的文件。如果你用npm安裝loaders赎瞎，node_modules文件夾不在資源文件夾的父目錄中牌里，webpack就找不到這個(gè)loader。你需要把node_modules文件夾的絕對(duì)路徑添加到resolveLoader.root這個(gè)選項(xiàng)中煎娇。 (resolveLoader: { root: path.join(__dirname, "node_modules") })
例子：
module: {
loaders: [
{
// "test" is commonly used to match the file extension
test: /.jsx$/,
// "include" is commonly used to match the directories
include: [
path.resolve(__dirname, "app/src"),
path.resolve(__dirname, "app/test")
],
// "exclude" should be used to exclude exceptions
// try to prefer "include" when possible
// the "loader"
loader: "babel-loader"
}
]
}````
