webpack4入门笔记——入口和出口配置

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'
	}
}
复制代码

这样，三个入口文件就被分别打包了