上一篇我們稍微提到了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:
感謝閱讀~~