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

Question

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, I would like to change the web packs 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 1

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

devServer: {   port: 9000 } 

Alternatively 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] 

Answer 2

Adding to the answer above: I use the CLI with --port ${1:-8080} that way I have a default and I can specify at run time