小編給大家分享一下webpack中如何配置文件入口和文件出口，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)專(zhuān)注于貢山網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供貢山營(yíng)銷(xiāo)型網(wǎng)站建設(shè)，貢山網(wǎng)站制作、貢山網(wǎng)頁(yè)設(shè)計(jì)、貢山網(wǎng)站官網(wǎng)定制、微信小程序定制開(kāi)發(fā)服務(wù)，打造貢山網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供貢山網(wǎng)站排名全網(wǎng)營(yíng)銷(xiāo)落地服務(wù)。

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:{ 
    //打包的路徑名稱
    path:path.resolve(__dirname,'dist'), //打包的文件名稱 
    filename:'bundle.js' },

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

filename:是打包后的文件名稱，這里我們起名為bundle.js。
只這樣寫(xiě)，是會(huì)報(bào)錯(cuò)的：找不到path這個(gè)東西。所以我們要在webpack.config.js的頭部引入path

const path = require(‘path’);

現(xiàn)在webpack.config.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:{}}

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

多入口、多出口配置：

const path = require('path')    //path是一個(gè)常量不能更改  ，path 需要引入var webpack = 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ù)入口文件的名稱，打包成相同的名稱，有幾個(gè)入口文件，就可以打包出幾個(gè)文件。

以上是“webpack中如何配置文件入口和文件出口”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

標(biāo)題名稱：webpack中如何配置文件入口和文件出口
文章URL：http://www.ekvhdxd.cn/article6/ghdgog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、用戶體驗(yàn)、面包屑導(dǎo)航、關(guān)鍵詞優(yōu)化、App設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)