webpack4入門筆記——入口和出口配置

前往懸崖下尋寶的神三算จุ๊บ發表於2018-05-05
Web筆記

entry（入口）

webpack將指定的js和及其依賴打包成一個檔案，當然需要在config中配置js檔案路徑

語法：

entry:{
	name1:path1,
	name2:path2
}
複製程式碼
  • name 給當前檔案加個名字（chunk Name），在輸入的時候可以使用
  • path 打包的js路徑

1 . 單入口配置

entry:'path|array'

引數為array時，包含多個path，單入口只會生成一個檔案

2 . 多入口配置

entry:{
	name1:path1,
	name2:[path2,path3] //陣列時合成一個
}
複製程式碼

多入口會生成多個檔案

output（出口）

指定檔案輸出的位置

語法：

output:{
    filename:'[name].js',
    path:'絕對路徑'
}
複製程式碼

  • filename為輸出後的檔名稱，name可以是動態的，等於entry中配置的name

    除了[name]還可以是 [hash]、[id]、[chunkhash]

  • path必須是絕對路徑，而且node計算時/並非是你的專案目錄（盤根目錄），實際路徑計算方法如下：

//引入node的path模組
const path = require("path"); 
//配置檔案所在的絕對路徑
path:path.resolve(__dirname, './');

注：後面的 ./ 相對於當前檔案所在路徑計算的
複製程式碼

場景示例

輸出一個檔案

//配置檔案
const path = require("path");
module.exports={
	//模式:開發
	mode:"development",
	//入口
	entry:'./test1.js',
	//出口
	output:{
		path:path.resolve(__dirname, './'),
		filename:'merge.js'
	}
}
複製程式碼

或者需要把多個檔案打包成一個

const path = require("path");
module.exports={
	mode:"development",
	//入口（多）
	entry:['./test1.js','./test2.js','./test3.js'],
	output:{
		path:path.resolve(__dirname, './'),
		filename:'merge.js'
	}
}
複製程式碼

輸入多個檔案

當你非單頁面應用時，希望把entry中不同的js分別打包，以供不同的html引用

const path = require("path");
module.exports={
	mode:"development",
	//入口(多)
	entry:{
		merge1:'./test1.js',
		merge2:'./test2.js',
		merge3:'./test3.js',
	},
	//出口
	output:{
		path:path.resolve(__dirname, './'),
		filename:'[name].js'
	}
}
複製程式碼

這樣，三個入口檔案就被分別打包了

webpack4入門筆記——入口和出口配置

相關文章