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]的意思是根據入口檔案的名稱，打包成相同的名稱，有幾個入口檔案，就可以打包出幾個檔案。