reactjs - Webpack 开发服务器 - 在多个端口上运行多个应用程序

Question

目前，我运行两个位于同一存储库上的应用程序。

第一个在 / 上运行，另一个在 端口 3000 上运行(不同的 HTML 文件)。

我想制作另一个在端口 5000 上运行的应用程序(带有自己的 HTML 文件)。

我怎样才能做到这一点？

这是我的 Webpack 配置:

   entry: {

       mainApp: "./MainApp.js",
       appNumberTwo: "./AppNumberTwo.js"
   }, 

  devServer: {
    port: 3000,
    host: '0.0.0.0',
    headers: {
        "Access-Control-Allow-Origin": "*"
    },
    historyApiFallback: {
        index: publicPath + 'app_number_2.html',
    },
    proxy: [{
        target: "http://www.dev.mydomain.com"
    }]
},

Answer 1

这是执行此操作的一种方法。您可以尝试使用这样的多个编译器，

//webpack.config.js
[{
    entry: "./entry1.js",
    output: {
        filename: "outpu1.js"
    }
}, {
    entry: "./entry2.js",
    output: {
        filename: "outpu2.js"
    }
}]

然后创建一个像这样的节点脚本，

const WebpackDevServer = require("webpack-dev-server")
const webpack = require("webpack")
const config = require("./webpack.config")

const compiler = webpack(config)

const server1 = new WebpackDevServer(compiler.compilers[0], {
    contentBase: __dirname,
    hot: true,
    historyApiFallback: false,
    compress: true,
})

const server2 = new WebpackDevServer(compiler.compilers[1], {
    contentBase: __dirname,
    hot: true,
    historyApiFallback: false,
    compress: true,
})

server1.listen(3000, "localhost", function() {})
server2.listen(5000, "localhost", function() {})

您为每个编译器创建一个webpack-dev-server实例。

您可以执行此操作的其他方法是在 package.json 中编写多个脚本，如下所示:

{
   "scripts":{
       "serve1": "webpack-dev-server --content-base <file/directory/url/port> --port 3000",
       "serve2": "webpack-dev-server --content-base <file/directory/url/port> --port 5000"
   }
}

然后使用npm-run-all运行这两个脚本，

npm-run-all serve1 serve2