webpack中如何配置文件入口和文件出口-創(chuàng)新互聯(lián)

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

成都創(chuàng)新互聯(lián)為客戶提供專業(yè)的網(wǎng)站設(shè)計、網(wǎng)站制作、程序、域名、空間一條龍服務(wù)，提供基于WEB的系統(tǒng)開發(fā). 服務(wù)項目涵蓋了網(wǎng)頁設(shè)計、網(wǎng)站程序開發(fā)、WEB系統(tǒng)開發(fā)、微信二次開發(fā)、成都手機網(wǎng)站制作等網(wǎng)站方面業(yè)務(wù)。

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

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

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

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

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

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

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

entry選項（入口配置）

  • wepback.config.js中的entry選項

//入口文件的配置項
 entry:{ 
     //里面的entery是可以隨便寫的
    entry:'./src/entry.js'},
output選項（出口配置）
//出口文件的配置項output:{ 
    //打包的路徑名稱
    path:path.resolve(__dirname,'dist'), //打包的文件名稱 
    filename:'bundle.js' },

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

filename:是打包后的文件名稱，這里我們起名為bundle.js。
只這樣寫，是會報錯的：找不到path這個東西。所以我們要在webpack.config.js的頭部引入path

const path = require(‘path’);
現(xiàn)在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,圖片如何轉(zhuǎn)換，壓縮 module:{}, 
//插件，用于生產(chǎn)模版和各項功能plugins:[], 
//配置webpack開發(fā)服務(wù)功能devServer:{}}

最后在終端中輸入webpack進行打包

多入口、多出口配置：
const path = require('path')    //path是一個常量不能更改  ，path 需要引入var webpack = require('webpack')
module.exports = {  // bundle入口
  entry:{
    entry:'./src/entry.js',    //下面的entry是隨便起的名字
    entry2:'./src/entry2.js'    //有兩個入口也要有兩個出口
  },  // bundle輸出
  output: {
    path: path.resolve(__dirname, 'dist'),    //絕對路徑
    filename: '[name].js' //可重命名        當(dāng)有多個入口文件時，出口文件用name，說明打包的出口文件和入口文件名相同
  },
  module:{},
  plugins:[],
  devServer:{}
}
注意：修改了兩個地方：入口和出口修改

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

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

當(dāng)前題目：webpack中如何配置文件入口和文件出口-創(chuàng)新互聯(lián)
當(dāng)前鏈接：http://www.muchs.cn/article6/djjpog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、網(wǎng)站內(nèi)鏈、手機網(wǎng)站建設(shè)、搜索引擎優(yōu)化、建站公司、用戶體驗

廣告

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

網(wǎng)站托管運營