nodemon не перезапускается [изоморфное веб-приложение] - PullRequest
Новая
       9

nodemon не перезапускается [изоморфное веб-приложение]

0 голосов
/ 27 июня 2018

Я настроил Webpack так, чтобы я мог загружать его как спереди, так и сзади. Передняя часть работает отлично, но перезагрузка сервера не работает.

Обычно, когда я нажимаю npm start (который запускает "webpack-dev-server -d --hot --config webpack.config.js --watch"), он создает мой bundle.js, а затем onbuildend запускает nodemon. Предполагается, что Nodemon наблюдает за любыми изменениями в моей папке src и в server.js.

webpack.config.js 

  plugins: [
    new WebpackShellPlugin({onBuildEnd: ['nodemon -V --watch src server.js']})
  ],
  devServer: {
    contentBase: path.resolve(__dirname, "./views"),
    historyApiFallback: true,
    inline: true,
    open: true,
    hot: true,
    host: 'localhost', // Defaults to `localhost`
    port: 3000, // Defaults to 8080
    watchContentBase: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        secure: false,
        changeOrigin: true,
      }
    }
  },

Однако, когда я делаю какие-либо изменения в моих js-файлах в src, nodemon не перезапускается, и я не вижу изменений.

ИЛИ Я получаю сообщение об ошибке «Произошла ошибка при попытке прокси-запроса / API / регистрации с локального хоста: от 3000 до http://localhost:8080 (ECONNRESET)»

Если кто-то может помочь мне понять эти 2 вопроса, это было бы здорово! спасибо.

enter image description here

1 Ответ

0 голосов
/ 27 июня 2018

ваши js-файлы, скомпилированные с помощью веб-пакета, обслуживаются на localhost: 3000, а nodemon на порте 8080. Я предполагаю, что вы используете экспресс, вы должны использовать webpack-dev-middleware, а не webpack-dev-server, таким образом вы будете обслуживать ваши реагирующие jsx / js и статические файлы с тем же портом, что и nodemon. Кстати, если вы запускаете ваше приложение через Docker-контейнер, CMD запуска должен содержать флаг -L.

nodemon -L server.js

ОБНОВЛЕНИЕ:

server.js 

var express = require("express")
var path = require("path")

const PORT = 3000
const app = express()


//webpack
const webpack = require('webpack')
const webpackDevMiddleware = require("webpack-dev-middleware");
const webpackHotMiddleware = require("webpack-hot-middleware");
const config = require("./webpack.config.js");
const compiler = webpack(config);


// Tell express to use the webpack-dev-middleware and use the webpack.config.js
// configuration file as a base.
app.use(webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath,
  watchOptions: {
    poll: true
  }
}));

app.use(webpackHotMiddleware(compiler))

// static assets
app.use(express.static(__dirname + "./public"))



// main route
app.get("/", (req, res) =>
  res.sendFile(path.resolve(__dirname, "./public/index.html"))
)

app.listen(PORT, () => console.log("App listening on port " + PORT))

webpack.config.js: 

const devMode = process.env.NODE_ENV !== "production";

const path = require("path");
const webpack = require("webpack");

var HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  mode: "development",
  watch: true,
  devtool: 'eval',
  entry: ["webpack-hot-middleware/client?reload=true","./src/index.jsx"],
  output: {
    filename: "js/bundle.js",
    path: path.resolve(__dirname, "./public"),
    publicPath: "/"
  },
  module: {
    rules: [
      { test: /\.jsx$/, exclude: /node_modules/, loader: "babel-loader" },
      {
        test: /\.s?[ac]ss$/,
        use: [
          devMode ? "style-loader" : MiniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader",
          "sass-loader"
        ]
      }
    ]
  },
  resolve: {
    modules: ["node_modules"],
    extensions: [".js", ".json", ".jsx", ".css", ".scss"]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
        template: './public/index.html'
    }),
    new MiniCssExtractPlugin({
      filename: devMode ? "[name].css" : "[name].[hash].css",
      chunkFilename: devMode ? "[id].css" : "[id].[hash].css"
    })
  ]
};

nodemon.json: 

{
    "ignore": [".git", "node_modules/**/node_modules"],
    "ext": "js,json,html"
}
...