前端知识8：webpack多入口和多出口的配置

多入口和多出口的情况：
一个入口的配置： //如果只有一个入口 使用字符串配置即可，打包后就会只有一个chunk和bundle chunk是默认的
entry:"./src/index.js",
“output”:{//输出的目录
filename:“build.js”,
path:resolve(__dirname,“build”)
}

多个入口：数组写法：
//数组写法如下：这种写法最后会将两个js合成一个js叫build.js
entry:["./src/index.js","./src/main.js"],
“output”:{//输出的目录
filename:“build.js”,
path:resolve(__dirname,“build”)
}

多个入口：对象写法：

entry:{
one:"./src/index.js",
two:"./src/main.js"
},
“output”:{//输出的目录
filename:"[name].js",
path:resolve(__dirname,“build”)
}

对象写法: 这种写法有几个入口文件就会形成几个chunk,输出几个bundle chunk的名称跟output 中的filename挂钩 fiename的值改为"[name].js" 表示下标为one文件生成的chunk名称就是one 这样的话可以做到不同的页面加载不同的js页面
如图所示：
分别打包，名称还是one和two

多个入口混合写法：

entry:{
    one:["./src/index.js","./src/a.js"],
    two:"./src/main.js"
},
"output":{//输出的目录
    filename:"[name].js", //输出的文件
    path:resolve(__dirname,"build")//输出的路径  找项目的根目录打包 所以需要导入一个path包专门处理路径的问题
}

这样的话 index.js和a.js会打包成一个js 名称为one main会单独打包一个js名称为two 如图：