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'
  }
},

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

1 个答案: