在上一節(jié)中我們只是簡(jiǎn)單的嘗了一下webpack的鮮，對(duì)其有了基本的了解，對(duì)于上一節(jié)當(dāng)中的打包方式，在實(shí)際開(kāi)發(fā)中并不使用，而是通過(guò)webpack的配置文件的方式進(jìn)行設(shè)置的，所以該節(jié)就在上一節(jié)的基礎(chǔ)上學(xué)一下配置文件的大體結(jié)構(gòu)以及入口、出口文件的配置。

1.新建配置文件webpack.config.js

webpack.config.js就是webpack的配置文件，需要自己在項(xiàng)目根目錄下手動(dòng)建立（如下圖）：

webpack_config.png

建立好后我們對(duì)其進(jìn)行配置。下面展示一個(gè)沒(méi)有內(nèi)容的標(biāo)準(zhǔn)webpack配置模版。
webpack.config.js：

module.exports={
    //入口文件的配置項(xiàng)
    entry:{},
    //出口文件的配置項(xiàng)
    output:{},
    //模塊：例如解讀CSS,圖片如何轉(zhuǎn)換，壓縮
    module:{},
    //插件，用于生產(chǎn)模版和各項(xiàng)功能
    plugins:[],
    //配置webpack開(kāi)發(fā)服務(wù)功能
    devServer:{}
}

簡(jiǎn)單解釋一下相關(guān)配置項(xiàng)：
(1)entry：配置入口文件的地址，可以是單一入口，也可以是多入口。
(2)output：配置出口文件的地址，在webpack2.X版本后，支持多出口配置。
(3)module：配置模塊，主要是解析CSS和圖片轉(zhuǎn)換壓縮等功能。
(4)plugins：配置插件，根據(jù)你的需要配置不同功能的插件。
(5)devServer：配置開(kāi)發(fā)服務(wù)功能。

1.1 entry選項(xiàng)（入口配置）

這個(gè)選項(xiàng)就是配置需要打包的文件一般是JavaScript文件（或CSS等其他文件），針對(duì)上一節(jié)的代碼進(jìn)行配置：
wepback.config.js中的entry選項(xiàng)：

//入口文件的配置項(xiàng)
entry:{
    //里面的entery是可以隨便寫(xiě)的
    entry:'./src/entry.js'
},

1.2 output選項(xiàng)（出口配置）

出口配置是用來(lái)告訴webpack最后打包文件的地址和文件名稱的。在上一節(jié)的基礎(chǔ)上，我們需要把相關(guān)的文件打包到dist目錄下，相關(guān)代碼如下：
webpack.config.js的output選項(xiàng)：

 output:{
        //輸出的路徑，用了Node語(yǔ)法
        path:path.resolve(__dirname,'dist'),
        //輸出的文件名稱
        filename:'bundle.js'
    },

配置好入口與出口文件的全部代碼如下：

const path = require('path');
module.exports={
    //入口文件的配置項(xiàng)
    entry:{
        entry:'./src/entry.js',
    },
    //出口文件的配置項(xiàng)
    output:{
        //輸出的路徑，用了Node語(yǔ)法
        path:path.resolve(__dirname,'dist'),
        //輸出的文件名稱
        filename:'bundle.js'
    },
    //模塊：例如解讀CSS,圖片如何轉(zhuǎn)換，壓縮
    module:{},
    //插件，用于生產(chǎn)模版和各項(xiàng)功能
    plugins:[],
    //配置webpack開(kāi)發(fā)服務(wù)功能
    devServer:{}
}

const path = require('path');使用了const，這是ES6的語(yǔ)法，如果對(duì)ES6還不熟悉,可以看看 ECMAScript 6(ES6) 。
path.resolve(__dirname,’dist’)就是獲取了項(xiàng)目的絕對(duì)路徑。
filename:是打包后的文件名稱，這里我們起名為bundle.js。

2.打包

上述代碼寫(xiě)完后，可以在webstorm終端中直接輸入webpack就會(huì)進(jìn)行打包,如圖：

webpack命令.png

結(jié)果就是在dist目錄下產(chǎn)生一個(gè)bundle.js文件，如圖：

生成bundle文件.png

3.多入口、多出口配置

在webpack3.x中配置多入口、多出口是非常簡(jiǎn)單的，只需新增在entry中新增文件路徑、同時(shí)修改出口文件名稱即可，具體看下例代碼：

3.1. 在src目錄下新建一個(gè)entry2.js文件

src/entry2.js:

alert("Hello")

3.2 webpack.config.js配置修改

修改后的代碼如下：

const path = require('path');
module.exports={
    //入口文件的配置項(xiàng)
    entry:{
        entry:'./src/entry.js',
        //這里我們又引入了一個(gè)入口文件
        entry2:'./src/entry2.js'
    },
    //出口文件的配置項(xiàng)
    output:{
        //輸出的路徑，用了Node語(yǔ)法
        path:path.resolve(__dirname,'dist'),
        //輸出的文件名稱
        filename:'[name].js'
    },
    //模塊：例如解讀CSS,圖片如何轉(zhuǎn)換，壓縮
    module:{},
    //插件，用于生產(chǎn)模版和各項(xiàng)功能
    plugins:[],
    //配置webpack開(kāi)發(fā)服務(wù)功能
    devServer:{}
}

可以看到入口文件entry中和文件output行進(jìn)行了增加和修改，在入口文件配置中，增加了一個(gè)entry2.js的入口文件，這時(shí)候要打包的就有了兩個(gè)入口文件。在文件output中我們把原來(lái)的bundle.js修改成了[name].js。
[name]的意思是根據(jù)入口文件的名稱，打包成相同的名稱，有幾個(gè)入口文件，就可以打包出幾個(gè)文件。

3.3 修改后打包

打包后的結(jié)果如下圖：

多入口、多出口.png