如何将webpack dev服务器的默认端口从8080更改为其他端口？

Question

我刚开始学习ReactJS,所以我有点生气.我正在遵循的部分课程涉及设置webpack开发服务器,到目前为止一切都很好.但是,我无法在浏览器中预览我正在做的事情(一切都已成功编译),因为我在8080上运行了另一个应用程序(APACHE).因此,想要更改webpack的默认端口8080到一个不同的端口,比如9000.我花了一段时间寻找解决方案,但似乎没有一个明确的方法来解决这个问题.

如果有帮助,这是我的基本webpack.config代码:

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

您可以使用devServer.portwebpack配置中的选项.

devServer: {
  port: 9000
}

Alternativley您可以使用--portCLI选项而不是更改您的webpack配置.所以你要像这样运行它:

webpack-dev-server --port 9000 [other options]

Answer 2

我在对象"start": "webpack-dev-server --port 8085"下添加了将默认 webpack 开发服务器端口更改为."scripts"package.json8085

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