Webpack devServer不代理请求

Question

问题是，webpack-dev-server根本没有将请求代理到我的API。

我的设置是，我有一个存储库，webpack.config.js当然是根目录，还有一个客户端目录，其中包含我所有的前端内容，然后其他目录与我的express服务器相关。在我将前端代码移到与express服务器相同的目录之前，前端代码最初是在它自己的单独的代码库中，然后它就可以进行代理了。

当我说“不工作”时，我的意思是:在本地主机9000上，当我向/api/foo发出请求时，它试图请求localhost:9000/api/foo而不是localhost:3100/api/foo，并在浏览器控制台中显示504错误。所以，webpack-dev-server正在工作，它根本没有做任何代理。下面是我认为的相关代码：

// webpack.config.js

const HtmlWebPackPlugin = require('html-webpack-plugin');
const path = require('path');
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
    entry: "./client",
    output: {
        publicPath: '/',
        path: path.join(__dirname, './build'),
        filename: 'bundle.js',
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                },
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: 'html-loader',
                    },
                ],
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'fonts/',
                        },
                    },
                ],
            },
        ],
    },
    resolve: {
        extensions: ['.js', '.jsx'],
    },
    devServer: {
        historyApiFallback: true,
        contentBase: './',
        overlay: true,
        port: 9000,
        compress: true,
        proxy: {
            '/api/**': {
                target: 'http://localhost:3100',
                secure: false,
                changeOrigin: true,
            },
        },
    },
    devtool: 'inline-source-map',
    plugins: [
        new HtmlWebPackPlugin({
            template: './client/index.html',
            filename: './index.html',
        }),
        new CompressionPlugin(),
    ],
};

Answer 1

对于遇到同样问题的人来说，这似乎是我的一个非常愚蠢的错误，这是由于我的npm脚本造成的。这是我的脚本：

webpack-dev-server --open --mode development && npm run server:dev

所以webpack-dev-server正在运行，但我认为它还没有达到第二部分，即npm run server:dev -启动我的服务器的东西。感谢Phil对我的问题发表评论，并建议我尝试用postman点击API，这让我意识到服务器没有运行，这让我意识到了错误。