webpack快速入門——配置文件：入口和出口，多入口、多出口配置

1.在根目錄新建一個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:{}
}

entry：配置入口文件的地址，可以是單一入口，也可以是多入口。

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

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

plugins：配置插件，根據你的需要配置不同功能的插件。

devServer：配置開發服務功能。

2.然后在終端輸入：webpack    進行打包

3.多入口、多出口配置

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.js的入口文件，這個文件需要手動建立，出口文件的filename，我們把原來的bundle.js修改成了[name].js

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

4.在終端輸入 webpack 進行打包

上圖：

想看效果，在終端輸入live-server，點擊dist文件夾，想要的效果就會出現

 

 

前端必學內容：webpack（模塊打包器）

webpack3 學習內容，點擊即可到達

(1).webpack快速入門——如何安裝webpack及注意事項

(2).webpack快速入門——webpack3.X 快速上手一個Demo   

(3).webpack快速入門——配置文件：入口和出口，多入口、多出口配置 

(4).webpack快速入門——配置文件：服務和熱更新

(5).webpack快速入門——CSS文件打包

(6).webpack快速入門——配置JS壓縮，打包

(7).webpack快速入門——插件配置：HTML文件的發布

(8).webpack快速入門——CSS中的圖片處理

(9).webpack快速入門——CSS分離與圖片路徑處理

(10).webpack快速入門——處理HTML中的圖片

(11).webpack快速入門——CSS進階，Less文件的打包和分離

(12).webpack快速入門——CSS進階：SASS文件的打包和分離

(13).webpack快速入門——CSS進階：自動處理CSS3前綴

(14).webpack快速入門——CSS進階：消除未使用的CSS

(15).webpack快速入門——給webpack增加babel支持

(16).webpack快速入門——打包后如何調試

(17).webpack快速入門——實戰技巧：開發和生產並行設置

(18).webpack快速入門——實戰技巧：webpack模塊化配置

(19).webpack快速入門——實戰技巧：優雅打包第三方類庫

(20).webpack快速入門——實戰技巧：watch的正確使用方法，webpack自動打包

(21).webpack快速入門——實戰技巧：webpack優化黑技能

(22).webpack快速入門——集中拷貝靜態資源

(23).webpack快速入門——Json配置文件使用

 

如果我的內容對你有幫助，歡迎打賞