如何使用 webpack-dev-server 运行后端代码？

Question

我正在使用 webpack 来捆绑我的前端 (React) 和后端 (Node.js) 代码。 捆绑过程很好。但是，当我运行“npm run start”时。前端代码运行良好。但是服务器端代码没有运行。我尝试运行“npm run build”以确保没有任何构建错误。没有任何错误或警告。所以我假设捆绑过程很好。

我完整的package.json 文件。

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.18.0",
    "bootstrap": "^4.1.3",
    "concurrently": "^4.1.0",
    "express": "^4.16.3",
    "mongodb": "^3.1.6",
    "prop-types": "^15.6.2",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-google-charts": "^3.0.8",
    "react-html-parser": "^2.0.2",
    "react-router-dom": "^4.3.1",
    "react-scripts": "^2.1.1",
    "reactstrap": "^6.5.0",
    "request": "^2.88.0"
  },
  "scripts": {
    "start": "webpack-dev-server --open --mode development",
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": {
    "/*": {
      "target": "http://localhost:3001"
    }
  },
  "devDependencies": {
    "@babel/core": "^7.1.6",
    "@babel/preset-env": "^7.1.6",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.4",
    "css-loader": "^1.0.1",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.4.4",
    "webpack": "^4.25.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10",
    "webpack-node-externals": "^1.7.2"
  }
}

我的webpack.config.js：

module.exports = [
    {
        /*Client Side*/
        module: {
            rules: [
                {
                    test: /\.(js|jsx)$/,
                    exclude: /node_modules/,
                    use: {
                        loader: "babel-loader"
                    }
                },
                {
                    test: /\.html$/,
                    use: {
                        loader: "html-loader",
                        options: { minimize: true }
                    }
                },
                {
                    test: /\.css$/,
                    use: [MiniCssExtractPlugin.loader,"css-loader"]
                }
            ]
        },
        plugins: [
            new HtmlWebPackPlugin({
                template: "./public/index.html",
                filename:"./index.html"
            }),
            new MiniCssExtractPlugin({
                filename: "[name].css",
                chunkFilename:"[id].css"
            })
        ]
    },
    {
        /*Config for backend code*/ 
        entry: './src/server/server.js',
        target: 'node',
        output: {
            filename: 'server.js'
        },
        externals: [nodeExternals()]
    }
]

如何使用 webpack 命令同时运行我的前端和后端代码？

Answer 1

这是我的package.json 的脚本部分的外观。它不使用 CRA，但非常相似。

"scripts": {
  "builddev": "webpack-dev-server --mode development --devtool inline-source-map --hot",
  "serverdev": "nodemon src/server.js",
  "dev": "concurrently \"npm run builddev\" \"npm run serverdev\""
},

其中concurrently 是this node module。

您可能需要代理您的服务器。由于您使用的是 CRA，因此您的 webpack 配置可能隐藏在某个地方，因此您必须向您的 package.json 添加一个附加属性：

"proxy": "http://localhost:3001",

其中 3001 是您的服务器正在运行的端口。

如果您使用自己的 webpack.config.js，则可以添加 devServer 部分 - 如下所示：

devServer: {
  historyApiFallback: true,
  proxy: {
    open: true,
    '/apipath': 'http://localhost:3001',
    '/apipath2': 'http://localhost:3001'
  }
},