配置檔案

webpack.config.js就是Webpack的配置檔案，這個檔案需要自己在專案根目錄下手動建立。建立好後我們對其進行配置，先看下面的程式碼（webpack.config.js的基本結構），這是一個沒有內容的標準webpack配置模版。

webpack.config.js

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

    devServer:{}
}

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

entry選項

這個選項就是配置我們要壓縮的檔案一般是JavaScript檔案（當然也可以是CSS…..）。

wepback.config.js中的entry選項

//入口檔案的配置項
entry:{
    //裡面的entery是可以隨便寫的
 

    entry:'./src/entry.js'
},

output選項

出口配置是用來告訴webpack最後打包檔案的地址和檔名稱的。

//出口檔案的配置項
output:{
    //打包的路徑
    path:path.resolve(__dirname,'dist'),
    //打包的檔名稱
    filename:'bundle.js'

},

如果你只這樣寫，是會報錯的：找不到path這個東西。所以我們要在webpack.config.js的頭部引入path，程式碼如下：

const path = require('path');

其實path.resolve(__dirname,’dist’)就是獲取了專案的絕對路徑。

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

現在webpack.config.js的程式碼：

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

這個程式碼寫完後，可以在終端中直接輸入webpack就會進行打包。

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

多入口、多出口配置

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

const path = require('path');
module.exports={
    //入口檔案的配置項
    entry:{
        entry:'./src/entry.js',
        //這裡我們又引入了一個入口檔案
        entry2:'./src/entry2.js'
    },
    //出口檔案的配置項
    output:{
        //輸出的路徑，用了Node語法
        path:path.resolve(__dirname,'dist'),
        //輸出的檔名稱
        filename:'[name].js'
    },
    //模組：例如解讀CSS,圖片如何轉換，壓縮
    module:{},
    //外掛，用於生產模版和各項功能
    plugins:[],
    //配置webpack開發服務功能
    devServer:{}
}

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

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