Question

我配置了Webpack，以便可以在正面和背面实时重新加载。前端运行良好，但服务器重载无法正常工作。

基本上，当我点击npm start（运行“ webpack-dev-server -d --hot --config webpack.config.js --watch”）时，它将创建我的bundle.js，然后在buildend上启动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,
      }
    }
  },

但是，每当我对src中的js文件进行任何更改时，nodemon都不会重新启动，并且看不到更改。

或者我收到“尝试将请求/ api / signup从localhost：3000代理到http://localhost:8080（ECONNRESET）时发生错误”

如果有人可以帮助我了解这2个问题，那就太好了！谢谢。

Answer 1

使用webpack编译的js文件在localhost：3000上提供，而nodemon在8080端口上。我假设您使用的是express，应该使用webpack-dev-middleware而不是webpack-dev-server，这样，您将为react 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"
}

nodemon不重新启动[同构Web应用]

1 个答案: