Question

我已使用webpack-dev-server在localhost上成功测试了我的第一个应用程序。但是，现在我尝试将我的应用程序部署到Digitalocean Droplet，并且无法让服务器运行。我可以毫无问题地生成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的反应，

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 dev服务器，但事实并非如此。相反，它将执行相当于运行webpack命令行实用程序;换句话说，它将创建您的应用程序包。

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

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);

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

2 个答案: