Collins Orlando Collins Orlando -4 years ago 590
React JSX Question

How do I change webpack dev server's default port from 8080 to a different port?

I just started learning ReactJS, and so I'm quite a bit raw. Part of the course I'm following involves setting up the webpack dev server, and so far it's been fine. However, I can't get to preview what I'm doing (everything is being compiled successfully), in the browser, as I have another application (APACHE) running on 8080. As such, would like to change webpack's port from its default 8080 to a different port like say 9000. I've spent a while looking for a solution but there doesn't seem to be a clear way on how to go around this.

If it helps, here is my basic webpack.config code:

var HtmlWebpackPlugin = require("html-webpack-plugin")
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
template: __dirname + "/app/index.html",
filename: "index.html",
inject: "body"
});

module.exports = {
entry: [
"./app/index.js"
],
output: {
path: __dirname + "/dist",
filename: "index_bundle.js"
},
module: {
loaders: [
{test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"}
]
},
plugins: [HTMLWebpackPluginConfig]
};

Answer Source

You can use the devServer.port option in the webpack config.

devServer: {
  port: 9000
}

Alternativley you can use the --port CLI option instead of changing your webpack config. So you'd run it like this:

webpack-dev-server --port 9000 [other options]
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download