webpack配置文件：入口和出口

配置文件

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]的意思是根據入口文件的名稱，打包成相同的名稱，有幾個入口文件，就能夠打包出幾個文件。