走在職業的道路上總是有很多迷惘。 不後悔曾經的自己選擇了前端這條路，即使前方佈滿了荊棘。 因此想要留下點什麼，也可以記錄下在這條路上的種種。 或許在未來的某個時間點，可以以另一種眼光看待這曾經的當下。
2019-06-03
webpack 設定筆記 ✧ 多個進入點設定
## 目的
處理多個檔案進入點，使程式執行的時候可以同時針對多個檔案進行打包。
## 針對多進入點修改
將原先的單值指派改為物件
檔案名稱：webpack.config.js
```
// 原始設定
module.exports = {
entry: './index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'index.min.js'
}
}
```
```
// 針對多進入點修改
module.export = {
entry: {
index: './index.js',
about: './about.js'
},
output: {
path: path.resolve(__dirname, './dist'),
filename: 'index.min.js'
}
}
```
## 修改打包後的檔名
在修改為具有多個進入點後，若是沒有對 output 的設定未進行更動，會導致所有檔案打包出來的檔名都是原先設定的「index.min.js」。
因此，接下來需要修改 output 中的內容自帶參數，使打包在進行的過程中，會針對 entry 的 key 值去修改輸出的檔名。
檔案名稱：webpack.config.js
```
// 原始設定
module.export = {
entry: {
index: './index.js',
about: './about.js'
},
output: {
path: path.resolve(__dirname, './dist'),
filename: 'index.min.js'
}
}
```
```
// 修改 output 內容，使其自帶參數
module.export = {
entry: {
index: './index.js',
about: './about.js'
},
output: {
path: path.resolve(__dirname, './dist'),
filename: '[name].min.js'
}
}
```
[name] 是 webpack 所提供的參數，會抓取 entry 物件中的 key 值，並針對 output 後的檔案進行命名。