webpack中如何配置文件入口和文件出口

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

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

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

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

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

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

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

• devServer：配置開發服務功能，后期我們會詳細講解。

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’);

現在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進行打包

多入口、多出口配置：

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' //可重命名        當有多個入口文件時，出口文件用name，說明打包的出口文件和入口文件名相同
  },
  module:{},
  plugins:[],
  devServer:{}
}

注意：修改了兩個地方：入口和出口修改

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

以上是“webpack中如何配置文件入口和文件出口”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！