爲了避免項目代碼都打包在一個文件下面，我採用多入口多出口打包的方式，以src/pages文件夾爲目錄，然後在pages下分別創建每個功能的文件夾進行代碼開發。這樣打包之後就會分別打到每個文件夾下。效果如圖：
chargeAction文件夾：
debang文件夾：
這樣訪問的時候就可以通過：
http://localhost:8106/文件夾名/來訪問每個功能點，如圖：
但是還有個需求：服務器上是通過nginx轉發的，轉發配置了/mb前綴，所以部署到服務器上，index.html的css和js路徑必須都加上/mb，怎麼辦呢？不可能一個一個頁面去修改。ejs模板是個好東西！public/index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>welcome</title>
<% for (var css in htmlWebpackPlugin.files.css) { %>
<link href="<%=process.env.NODE_ENV=='production'?'/mb'+htmlWebpackPlugin.files.css[css]:htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
<% } %>
<script src=https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js></script>
<script>
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
if(!window.Promise) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
}
</script>
</head>
<body>
<div id="root" style="height:100vh;"></div>
<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
<script type="text/javascript" src="<%=process.env.NODE_ENV=='production'?'/mb'+htmlWebpackPlugin.files.chunks[chunk].entry:htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
<% } %>
</body>
</html>
然後把模板文件改成index.ejs即可。
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "./public/index.ejs"),
filename: `${item}/index.html`,
chunks: ["manifest", "vendor", item],
inject: false//取消自動插入，使用ejs模板
})
output中也要配置publicPath，不然css裏面引用的圖片路徑會不對。
output: {
path: __dirname + "/build",
filename: "[name]/[name]-[hash].js",
publicPath: process.env.NODE_ENV=='production'?'/mb/':'/' //因爲服務器用了nginx代理/mb
},
package.json中build命令：
"scripts": {
"build": "webpack -p --define process.env.NODE_ENV='\"production\"' --progress --config webpack.pro.config.js",
"dev": "webpack-dev-server --mode development --config webpack.dev.config.js",
},
這樣運行 npm run build打包後就index.html會自動加上/mb
多入口多出口可參考其他大神文章：https://segmentfault.com/a/1190000018381677