首先要說明的是：學習這節課前，務必作完上節課的程式碼，否則你會學的一臉懵逼。

上節課通過一個小Demo我們對Webpack有了初步瞭解，但是上節課的終端打包方案，在實際開發中並不使用，而是使用Webpack的配置檔案的方式進行設定。這節課我們就學一下配置檔案的大體結構和入口出口檔案的配置。

配置檔案webpack.config.js

webpack.config.js就是webpack的配置檔案，首先在專案根目錄上手動建立。建好後對其進行配置，下面程式碼是webpack.config.js的基本結構

module.exports = {
//入口檔案配置項
entry:{},
//出口檔案配置項
output
 
:{},
//模組：例如解讀css，圖片如何轉換，壓縮
module:{},
//外掛，用於生產模板和各項功能
plugins:[],
//配置webpak開發服務功能
devServer:{}
}

• entry：配置入口檔案的地址，可以是單一入口，也可以是多入口。
• output：配置出口檔案的地址，在webpack2.X版本後，支援多出口配置。
• module：配置模組，主要是解析CSS和圖片轉換壓縮等功能。
• plugins：配置外掛，根據你的需要配置不同功能的外掛。
• devServer：配置開發服務功能，後期我們會詳細講解。

這個選項就是配置我們呀壓縮的檔案，這裡要填寫的是src目錄下的entry.js檔案。

//入口檔案配置項
entry:{
entry:'./src/entry.js'
},

output選項（出口配置）

const path = require('path');
module.exports = {
//入口檔案配置項
entry:{
entry:'./src/entry.js'
},
//出口檔案配置項
output:{
path:path.resolve(__dirname,'dist'),//打包到路徑名稱`
filename:'bundle.js'//打包到的檔名稱
},

注意了，這裡在output配置項中添加了兩個資訊，打包路徑名稱和打包到的檔名稱。但是隻寫這兩個是會報錯的，還需要在頭部引入path。

filename：是打包後的檔名稱，這裡我們起名為bundle.js。

現在webpack.config.js檔案是這樣的

const path = require('path');
module.exports = {
//入口檔案配置項
entry:{
entry:'./src/entry.js'
},
//出口檔案配置項
output:{
path:path.resolve(__dirname,'dist'),//打包到路徑名稱
filename:'bundle.js'//打包到的檔名稱
},
//模組：例如解讀css，圖片如何轉換，壓縮
module:{},
//外掛，用於生產模板和各項功能
plugins:[],
//配置webpak開發服務功能
devServer:{}
}

在實際開發中我們都是通過配置檔案進行打包的，所以必須要掌握好。

多入口、多出口配置

Webpack在版本1的時候很難設定多出口檔案，但是在2版本開始就變的很方便了。直接看多入口和多出口的檔案配置，然後可以和單一出口對比一下，你會發現這種設定非常簡單（只需改動兩點配置就可以）。

const path = require('path');
module.exports = {
//入口檔案配置項
entry:{
entry:'./src/entry.js',
entry2:'./src/entry2.js'
},
//出口檔案配置項
output:{
path:path.resolve(__dirname,'dist'),//打包到路徑名稱
filename:'[name].js'//打包到的檔名稱
},
//模組：例如解讀css，圖片如何轉換，壓縮
module:{},
//外掛，用於生產模板和各項功能
plugins:[],
//配置webpak開發服務功能
devServer:{}
}

可以看到程式碼的第7和12行進行了增加和修改，在入口檔案配置中，增加了一個entry2.js的入口檔案（這個檔案你需要自己手動建立），這時候要打包的就有了兩個入口檔案。在程式碼12行我們把原來的bundle.js修改成了[name].js。

[name]的意思是根據入口檔案的名稱，打包成相同的名稱，有幾個入口檔案，就可以打包出幾個檔案。

請注意，配置檔案中的相關欄位名不要寫錯了，大小寫要注意，大小寫要注意，大小寫要注意，重要的事情說三遍，不然會在進行webpack指令打包時出現錯誤，講真報的錯誤一大串實在是不好找到問題在哪，所以還是要在最初建立相關檔案時仔細點

最後總結一下：

第二節學習的打包指令  webpack  {entry files}  {destination for bundled filse}在實際專案過程中並不會使用，因為對於一個專案有很多相關的設定項，比較複雜，所以這個時候使用webpack.config.js配置檔案進行相關的配置會方便很多，最後直接使用webpack指令進行打包就可以了。