上一篇我们稍微提到了webpack.config.js。今天主要来说下如何配置多入口，多出口。
我们之前写到的webpack.config.js，具体代码如下：
module.exports = { mode: 'development', //入口 entry: __dirname + '/src/entry.js', //出口 output: { path:__dirname + '/dist', filename: 'bundle.js', } }
上面的entry 和 output 就是单一的入口和出口。
下面我们创建一个多入口，多出口的实例。
准备工作如下：
1. 新建文件夹：page，并在该文件夹下面创建 index.html 和 signup.html 2个文件
index.html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>index</title>
</head>
<body>
<div id="title"></div>
<script src="../src/base.js"></script>
<script src="../src/index.js"></script>
</body>
</html>
index.html 引用了base.js 和 index.js。js文件我们等会创建。
signup.html代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>signup</title>
</head>
<body>
<script src="../src/base.js"></script>
<script src="../src/signup.js"></script>
</body>
</html>
signup.html 引用了base.js 和 signup.js。
2. 在src文件夹下面创建base.js, index.js, signup.js 3个js 文件：
base.js:
var open=true; export {open};
index.js:
import {open} from './base';
if(open){
document.body.innerHTML=`<a href="signup.html">注册</a>`
}
signup.js:
import {open} from './base';
if(open){
document.body.innerHTML=`<h1>Hello World!</h1>`
}else{
document.body.innerHTML=`<h1>暂不开放注册</h1>`
}
从上面我们得知 index.html 页面引用了base.js 和 index.js ，
signup.html 引用了base.js 和 signup.js。
我们通过webpack如何分别打包js文件呢？这里我们通过 webpack 的多入口 和 多出口配置就能达到该目的了。
3. 配置多入口，多出口：
module.exports = { mode: 'development', entry: { index:__dirname + '/src/index.js', signup:__dirname + '/src/signup.js', }, output: { path:__dirname + '/dist', filename: '[name].bundle.js', } }
跟单入口，单出口的文件相比，entry现在是一个对象了，output 的 filename 多了一个 [name].。
最后执行打包命令，可以看到 dist 目录下面生成了 index.bundle.js 和 signup.bundle.js 。
所以这里的 [name] 等同于 entry 定义的键名。
执行结果如下：
文件打包完成之后，记得把你html 引用的js 路径改成你打包后的js路径。如下图：
index.html:
signup.html:
感谢阅读~~