使用 reactjs 启动节点应用程序时 webpack 回调出错

Question

我已经使用webpack-dev-server 在本地主机上成功测试了我的第一个应用程序。但是，现在我正在尝试将我的应用程序部署到 Digitalocean 液滴，并且无法让服务器运行。我可以毫无问题地生成 bundle.js 文件。

当尝试使用pm2 或npm 运行我的node.js 服务器时，会引发以下错误：

/home/deploy/apps/web/node_modules/webpack/lib/webpack.js:30
    if(typeof callback !== "function") throw new Error("Invalid argument: callback");

Error: Invalid argument: callback
at new webpack (/home/deploy/apps/web/node_modules/webpack/lib/webpack.js:30:44)
at Object.<anonymous> (/home/deploy/apps/web/server.js:5:1)
at Module._compile (module.js:556:32)
at Object.Module._extensions..js (module.js:565:10)
at Module.load (module.js:473:32)
at tryModuleLoad (module.js:432:12)
at Function.Module._load (module.js:424:3)
at Module.runMain (module.js:590:10)
at run (bootstrap_node.js:394:7)
at startup (bootstrap_node.js:149:9)

我的webpack.config.js 生产文件：

var path = require('path');
var webpack = require('webpack');
var CleanPlugin = require('clean-webpack-plugin');

module.exports = {
  devtool: false,
  debug: false,
  entry: [
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
      },
      plugins: [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.MinChunkSizePlugin({
          minChunkSize: 51200, // ~50kb
        }),
    new webpack.optimize.UglifyJsPlugin({
      mangle:   true,
      minimize: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.DefinePlugin({
      __SERVER__:      false,
      __DEVELOPMENT__: false,
      __DEVTOOLS__:    false,
      'process.env':   {
        BABEL_ENV: JSON.stringify('production'),
       },
    }),
    new CleanPlugin('builds')
  ],
  module: {
    loaders: [{
      test: /\.js$/,
      loaders: ['babel?presets[]=es2015,presets[]=stage-0,presets[]=react,plugins[]=transform-runtime'],
      include: path.join(__dirname, 'src')
    }]
  }
};

server.js文件：

var webpack = require('webpack');
var config = require('./webpack.prod.config');

new webpack(webpack(config), {
  publicPath: config.output.publicPath
}).listen(8080, function onStart(err) {
  if (err) {
    return console.log(err);
  }
  console.log('Listening at http://localhost:8080/');
});

由于我是 React/node 的新手，所以我无法真正指出哪里出了问题。关于如何解决这个问题的任何指针？

Answer 1

你可以按照下面的文章在digitalocean上实现react，

http://www.davidmeents.com/how-to-simply-deploy-a-react-app-on-digital-ocean/

Answer 2

对于初学者来说，这是不正确的：

new webpack(webpack(config), {
  publicPath: config.output.publicPath
})

正确的调用如下所示：

webpack(config, function(err, stats) {
  ...
});

然而，这并没有像你想象的那样做：看起来你期望它运行 Webpack 开发服务器，但事实并非如此。相反，它将执行相当于运行webpack 命令行实用程序；换句话说，它将创建您的应用程序包。

如果你想运行开发服务器，一个好的起点是this document。您可能可以使用命令行实用程序 webpack-dev-server 运行开发服务器，但如果您想以编程方式使用它，它看起来像这样（取自上述页面）：

var config = require("./webpack.prod.config");
config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/");
var compiler = webpack(config);
var server = new WebpackDevServer(compiler, {...});
server.listen(8080);