Question

在启动React应用之前，我使用了一个简单的脚本，但是我需要以这种繁琐的方式手动重新加载，重建和重新启动所有内容。现在，我正在尝试设置webpack-dev-server来为我执行此操作。以某种方式仅由webpack-dev-server开始./node_modules/.bin/webpack-dev-server --inline --hot只是从最顶层的文件夹中静态地提供文件，而不是启动应用程序。以前，我使用以下脚本启动应用程序（运行良好）：

#!/usr/bin/env node

/**
 * Module dependencies.
 */

var app = require('../app');
var debug = require('debug')('nodetest1:server');
var http = require('http');

/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);

/**
 * Create HTTP server.
 */

var server = http.createServer(app);

/**
 * Listen on provided port, on all network interfaces.
 */

server.listen(port);
server.on('error', onError);
server.on('listening', onListening);

/**
 * Normalize a port into a number, string, or false.
 */

function normalizePort(val) {
  var port = parseInt(val, 10);

  if (isNaN(port)) {
    // named pipe
    return val;
  }

  if (port >= 0) {
    // port number
    return port;
  }

  return false;
}

/**
 * Event listener for HTTP server "error" event.
 */

function onError(error) {
  if (error.syscall !== 'listen') {
    throw error;
  }

  var bind = typeof port === 'string'
    ? 'Pipe ' + port
    : 'Port ' + port;

  // handle specific listen errors with friendly messages
  switch (error.code) {
    case 'EACCES':
      console.error(bind + ' requires elevated privileges');      process.exit(1);
      break;
    case 'EADDRINUSE':
      console.error(bind + ' is already in use');
      process.exit(1);
      break;
    default:
      throw error;
  }
}

/**
 * Event listener for HTTP server "listening" event.
 */

function onListening() {
  var addr = server.address();
  var bind = typeof addr === 'string'
    ? 'pipe ' + addr
    : 'port ' + addr.port;
  debug('Listening on ' + bind);

webpack.config.js的外观如下：

var path = require('path');

module.exports = {
  entry: {
    app: ['babel-polyfill', './views/index.js']
    //vendor: ["react","react-dom"]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './public')
  },
  devtool: "#eval-source-map",
  module: {
       rules: [{
           test: /\.jsx?$/,
           exclude: /node_modules/,
           use: {
               loader: 'babel-loader?cacheDirectory=true',
           }
       },
       {
         test: /\.css$/,
         loader: "style-loader!css-loader"
        },
        {
        test: /\.(jpe?g|gif|png|svg)$/i,
        use: [
        {
          loader: 'url-loader',
          options: {
            limit: 10000
          }
        }
      ]
        }]
  },
  node: {
    fs: 'empty'
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
      externals: {
        fs: '{}',
        tls: '{}',
        net: '{}',
        dns: '{}',
        readline: '{}'
      }
};

使用./node_modules/.bin/webpack-dev-server --inline --hot启动应用程序后，我看到以下输出：

任何建议将不胜感激。

更新

我在app.html文件夹中将作为入口点的文件名从index.html更改为public，还将启动应用程序的命令更改为./node_modules/.bin/webpack-dev-server --content-base public --inline --hot应用已启动，但对节点服务器的请求导致404错误，服务器未以某种方式处理请求。我猜可能是因为未运行app.js脚本，因此没有设置所有中间件，但是我不确定如何预先运行它或将其打包到bundle.js中。但是我有两层：app.js运行并显示登录页面，然后如果登录成功（当然，开发不需要它），则会重定向到实际的应用程序。

更新

我尝试使用nodemon：How to auto-reload files in Node.js?

请执行以下操作：nodemon ./bin/www，其中www是服务器脚本。它根本没有在监视我的更改。当我更改某些.jsx文件时，不会重新加载。

更新

我尝试将webpack.config.js中的入口点更改为：

entry: {
    app: ['babel-polyfill', './views/index.js']
    //vendor: ["react","react-dom"]
  },

收件人：

entry: {
    app: ['babel-polyfill', './app.js']
    //vendor: ["react","react-dom"]
  },

但是在这种情况下，构建应用程序时会出现错误：

遵循此处的建议：https://github.com/webpack/webpack/issues/2142

我在target: node中设置了webpack.config.js。它开始给我另一个错误：

我找到了以下解决方案：https://github.com/babel/babel/issues/5268

但是运行npm install --save babel-standalone之后，错误仍然存在。

更新

通过将.json添加到extensions：https://github.com/discordjs/discord.js/issues/2656

，我得以解决该错误

现在webpack成功地编译了项目，没有任何错误，但是，当我在浏览器的控制台中以./node_modules/.bin/webpack-dev-server --content-base public --inline --hot启动项目时，我看到了错误：Uncaught ReferenceError: require is not defined并且没有加载。 / p>

更新

我正在尝试关注：https://hackernoon.com/full-stack-web-application-using-react-node-js-express-and-webpack-97dbd5b9d708

它运行正常，但是当我更改React文件时，不会重新加载该应用程序。此外，babel那里的设置完全搞乱了我的项目，因此我现在无法构建该项目。

Answer 1

以某种方式仅通过./node_modules/.bin/webpack-dev-server --inline --hot启动webpack-dev-server只是从最顶层的文件夹中静态地提供文件，而不是启动应用程序。

您猜对了，这是由于您拥有app.html而不是index.html，并且devServer不知道默认情况下要加载哪个文件。您可以像重命名文件一样来解决它，也可以在webpack.config.js中设置以下选项：devServer: {index: 'app.html'}-有关详细信息，请参见this。但我会像您一样亲自将其重命名。
该应用已启动，但对节点服务器的请求导致404错误

这可能有两个原因。首先，您的服务器没有启动，您必须在启动之前（node ./bin/www来启动它，因为devServer只提供静态客户端资产，并且没有任何服务器逻辑。其次，即使您启动它，也可能会出现404错误。这取决于您如何指定URL。如果将它们指定为绝对路径（如http://localhost:3000/my-endpoint/path），则它们应正常访问主服务器，但是如果将它们指定为相对路径（/my-endpoint/path），则它们将被发送到{{1} }（即devServer主机/端口而不是主服务器）。为了解决这个问题，您可以在http://localhost:8080/my-endpoint/path中指定代理设置：
```
webpack.config
```
有关详细信息，请参见this。

好吧，您还遇到了其他错误，因为您开始捆绑服务器（devServer: { proxy: [{ context: ['/my-endpoint'], // endpoints which you want to proxy target: 'http://localhost:3000' // your main server address }] }而不是一开始就正确地开始使用客户端应用程序。成功捆绑服务器应用程序后，您当然无法在浏览器中打开它，因为它是Node.js代码（例如，浏览器没有target: node方法，因此会出现错误）

编辑：

缺少对require的评论。是的，如果您有一些诸如--content-base public之类的预建资产，则还必须指定想要devServer服务的文件夹。另一种选择是使用html-webpack-plugin，它将由webpack动态生成index.html，因此devServer知道从哪里获取它（从devServer保留所有生成资产的内存中获取）。

无法设置webpack-dev-server来启动React应用

1 个答案:

编辑：