Webpack dev server - run multiple apps on multiple ports
Here is one way to do this. You can try using multiple compilers like this,
//webpack.config.js
[{
entry: "./entry1.js",
output: {
filename: "outpu1.js"
}
}, {
entry: "./entry2.js",
output: {
filename: "outpu2.js"
}
}]
then create a node script like this,
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() {})
You create a webpack-dev-server
instance for each compiler
.
Other way you can do this is to write multiple scripts in your package.json like this:
{
"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"
}
}
and then run both scripts using npm-run-all
,
npm-run-all serve1 serve2
Two node instance in package.json
"scripts": {
"dev": "NODE_ENV=dev node ./node_modules/.bin/webpack-dev-server --watch --mode=development --config-name='survey' & NODE_ENV=dev node ./node_modules/.bin/webpack-dev-server --watch --mode=development --config-name='account'",
"build": "node ./node_modules/.bin/rimraf ./dist && node ./node_modules/.bin/webpack-cli --mode=production"
},
This is two different config. In every config have different dev config
const account = require("./account.config");
const survey = require("./survey.config");
module.exports = [account, survey];