webpack - nodemon 未重新启动 [同构 Web 应用程序]

Question

我配置了 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,
      }
    }
  },

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

或者我收到“尝试将请求 /api/signup 从 localhost:3000 代理到http://localhost:8080 (ECONNRESET) 时出错”

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

标签： webpacknodemon

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

更新：

服务器.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"
}