Как использовать webpack-dev-server для запуска внутреннего кода? - PullRequest
Новая
       7

Как использовать webpack-dev-server для запуска внутреннего кода?

0 голосов
/ 30 ноября 2018

Я использую веб-пакет для связывания моих внешних (React) и внутренних (Node.js) кодов.Процесс упаковки был в порядке.Тем не менее, когда я запускаю «npm Run Start».Код fornt-end работает нормально.Но серверный код не был запущен.Я попытался запустить «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 для запуска моего внешнего интерфейса ивнутренний код одновременно?

1 Ответ

0 голосов
/ 30 ноября 2018

Вот как выглядит сценарий моего 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 - это этот модуль узла .

Возможно, вам потребуется прокси-сервер,Поскольку вы используете CRA, ваша конфигурация веб-пакета, вероятно, где-то спрятана, поэтому вам придется добавить дополнительное свойство к вашему 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'
  }
},
...