CODEWITHSUNDEEP
reactjswebpack
Collins Orlando
Collins Orlando

Reputation: 1691

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, 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]
};

Upvotes: 47

Views: 50736

Answers (3)

Arpit Aggarwal
Arpit Aggarwal

Reputation: 29316

I added "start": "webpack-dev-server --port 8085" under "scripts" object in package.json to change default webpack dev server port to 8085.

"scripts": {
  ...
  "start": "webpack-dev-server --port 8085",
  "build": "webpack --mode=production",
  ...
}

Upvotes: 9

Daniel Lefebvre
Daniel Lefebvre

Reputation: 374

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

Upvotes: 1

Michael Jungo
Michael Jungo

Reputation: 33010

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]

Upvotes: 85

Related Questions