(3/24)輕鬆配置 webpack3.x入口、出口配置項

在上一節中咱們只是簡單的嚐了一下webpack的鮮，對其有了基本的瞭解，對於上一節當中的打包方式，在實際開發中並不使用，而是經過webpack的配置文件的方式進行設置的，因此該節就在上一節的基礎上學一下配置文件的大致結構以及入口、出口文件的配置。

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

webpack.config.js就是webpack的配置文件，須要本身在項目根目錄下手動創建（以下圖）：

創建好後咱們對其進行配置。下面展現一個沒有內容的標準webpack配置模版。

 webpack.config.js：

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

簡單解釋一下相關配置項：

• entry：配置入口文件的地址，能夠是單一入口，也能夠是多入口。

• output：配置出口文件的地址，在webpack2.X版本後，支持多出口配置。

• module：配置模塊，主要是解析CSS和圖片轉換壓縮等功能。

• plugins：配置插件，根據你的須要配置不一樣功能的插件。

• devServer：配置開發服務功能。

1.1 entry選項（入口配置）

這個選項就是配置須要打包的文件通常是JavaScript文件（或CSS等其餘文件），針對上一節的代碼進行配置：

wepback.config.js中的entry選項：

//入口文件的配置項
entry:{
    //裏面的entery是能夠隨便寫的
    entry:'./src/entry.js'
},

1.2 output選項（出口配置）

出口配置是用來告訴webpack最後打包文件的地址和文件名稱的。在上一節的基礎上，咱們須要把相關的文件打包到dist目錄下，相關代碼以下：

webpack.config.js的output選項：

    output:{
        //輸出的路徑，用了Node語法
        path:path.resolve(__dirname,'dist'),
        //輸出的文件名稱
        filename:'bundle.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:{}
}

const path = require('path');使用了const，這是ES6的語法，若是對ES6還不熟悉,能夠看看 ECMAScript 6(ES6)

path.resolve(__dirname,’dist’)就是獲取了項目的絕對路徑。

filename:是打包後的文件名稱，這裏咱們起名爲bundle.js。

2.打包

上述代碼寫完後，能夠在webstorm終端中直接輸入webpack就會進行打包,如圖：

結果就是在dist目錄下產生一個bundle.js文件，如圖：

3.多入口、多出口配置

在webpack3.x中配置多入口、多出口是很是簡單的，只需新增在entry中新增文件路徑、同時修改出口文件名稱便可，具體看下例代碼：

3.1. 在src目錄下新建一個entry2.js文件

src/entry2.js:

 

alert("Hello")

 

3.2 webpack.config.js配置修改

修改後的代碼以下：

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:{}
}

能夠看到入口文件entry中和文件output行進行了增長和修改，在入口文件配置中，增長了一個entry2.js的入口文件，這時候要打包的就有了兩個入口文件。在文件output中咱們把原來的bundle.js修改爲了[name].js。

[name]的意思是根據入口文件的名稱，打包成相同的名稱，有幾個入口文件，就能夠打包出幾個文件。

3.3 修改後打包

打包後的結果以下圖：