webpack4多入口多出口打包index.html自动加上代理路径

为了避免项目代码都打包在一个文件下面，我采用多入口多出口打包的方式，以src/pages文件夹为目录，然后在pages下分别创建每个功能的文件夹进行代码开发。这样打包之后就会分别打到每个文件夹下。效果如图：

chargeAction文件夹：

debang文件夹：

这样访问的时候就可以通过：

http://localhost:8106/文件夹名/来访问每个功能点，如图：

但是还有个需求：服务器上是通过nginx转发的，转发配置了/mb前缀，所以部署到服务器上，index.html的css和js路径必须都加上/mb，怎么办呢？不可能一个一个页面去修改。ejs模板是个好东西！public/index.ejs

    
        
        
        
        <% for (var css in htmlWebpackPlugin.files.css) { %>
        
        <% } %>
        
        
    
    
        

        <% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
        
        <% } %>
    

然后把模板文件改成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