为了避免项目代码都打包在一个文件下面,我采用多入口多出口打包的方式,以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