webpack中怎么配置文件入口和文件出口

今天小編給大家分享一下webpack中怎么配置文件入口和文件出口的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

　　1、建立一個(gè)js為webpack.config.js文件，該文件是Webpack的配置文件

　　webpack.config.js

　　module.exports={

　　entry:{},//入口文件的配置項(xiàng)

　　output:{},//出口文件的配置項(xiàng)

　　module:{},//模塊：例如解讀CSS,圖片如何轉(zhuǎn)換，壓縮

　　plugins:[],//插件，用于生產(chǎn)模版和各項(xiàng)功能

　　devServer:{}//配置webpack開(kāi)發(fā)服務(wù)功能}

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

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

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

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

　　devServer：配置開(kāi)發(fā)服務(wù)功能，后期我們會(huì)詳細(xì)講解。

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

　　wepback.config.js中的entry選項(xiàng)

　　//入口文件的配置項(xiàng)

　　entry:{

　　//里面的entery是可以隨便寫(xiě)的

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

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

　　//出口文件的配置項(xiàng)output:{

　　//打包的路徑名稱(chēng)

　　path:path.resolve(__dirname,'dist'),//打包的文件名稱(chēng)

　　filename:'bundle.js'},

　　path.resolve(__dirname,’dist’)//就是獲取了項(xiàng)目的絕對(duì)路徑。

　　filename:是打包后的文件名稱(chēng)，這里我們起名為bundle.js。

　　只這樣寫(xiě)，是會(huì)報(bào)錯(cuò)的：找不到path這個(gè)東西。所以我們要在webpack.config.js的頭部引入path

　　constpath=require(‘path’);

　　現(xiàn)在webpack.config.js的代碼：

　　constpath=require('path');

　　module.exports={

　　//入口文件的配置項(xiàng)entry:{

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

　　//出口文件的配置項(xiàng)output:{

　　//輸出的路徑，用了Node語(yǔ)法

　　path:path.resolve(__dirname,'dist'),

　　//輸出的文件名稱(chēng)filename:'bundle.js'},

　　//模塊：例如解讀CSS,圖片如何轉(zhuǎn)換，壓縮module:{},

　　//插件，用于生產(chǎn)模版和各項(xiàng)功能plugins:[],

　　//配置webpack開(kāi)發(fā)服務(wù)功能devServer:{}}

　　最后在終端中輸入webpack進(jìn)行打包

　　多入口、多出口配置：

　　constpath=require('path')//path是一個(gè)常量不能更改，path需要引入varwebpack=require('webpack')

　　module.exports={//bundle入口

　　entry:{

　　entry:'./src/entry.js',//下面的entry是隨便起的名字

　　entry2:'./src/entry2.js'//有兩個(gè)入口也要有兩個(gè)出口

　　},//bundle輸出

　　output:{

　　path:path.resolve(__dirname,'dist'),//絕對(duì)路徑

　　filename:'[name].js'//可重命名當(dāng)有多個(gè)入口文件時(shí)，出口文件用name，說(shuō)明打包的出口文件和入口文件名相同

　　},

　　module:{},

　　plugins:[],

　　devServer:{}

　　}

　　注意：修改了兩個(gè)地方：入口和出口修改

　　[name]的意思是根據(jù)入口文件的名稱(chēng)，打包成相同的名稱(chēng)，有幾個(gè)入口文件，就可以打包出幾個(gè)文件。

以上就是“webpack中怎么配置文件入口和文件出口”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。