Javascript 将react/node应用程序部署到heroku时出现网页包开发服务器错误

我在向Heroku部署React/Express应用程序时遇到问题。我得到了一个“Webpack dev server not found”错误，尽管我认为我不再使用dev服务器了，因为我开始使用我的节点服务器

下面是my package.json（仅适用于开发人员依赖项）

下面是我的build.js

process.env.NODE_ENV = 'production';

console.log('Generating minified bundle for production via Webpack...'.blue);

webpack(webpackConfig).run((err, stats) => {
  if (err) { // so a fatal error occurred. Stop here.
    console.log(err.bold.red);
    return 1;
  }

  const jsonStats = stats.toJson();

  if (jsonStats.hasErrors) {
    return jsonStats.errors.map(error => console.log(error.red));
  }

  if (jsonStats.hasWarnings) {
    console.log('Webpack generated the following warnings: '.bold.yellow);
    jsonStats.warnings.map(warning => console.log(warning.yellow));
  }

  console.log(`Webpack stats: ${stats}`);
  console.log('Your app has been compiled in production mode and written to /dist.'.green);

  return 0;
});

下面是我的buildHtml.js

import fs from 'fs';
import cheerio from 'cheerio';
import colors from 'colors';

/*eslint-disable no-console */

fs.readFile('src/index.html', 'utf8', (err, markup) => {
  if (err) {
    return console.log(err);
  }

  const $ = cheerio.load(markup);
  $('head').prepend('');

  fs.writeFile('dist/index.html', $.html(), 'utf8', function (err) {
    if (err) {
      return console.log(err);
    }
    console.log('index.html written to /dist'.green);
  });
});

下面是我的publicService.js

var express = require('express');
var path = require('path');
var open = require('open');
var compression = require('compression');
var favicon = require('serve-favicon');

/*eslint-disable no-console */

const port = process.env.PORT || 3000;
const app = express();

app.use(compression());
app.use(express.static('dist'));

app.get('*', function(req, res) {
  res.sendFile(path.join(__dirname, '../dist/index.html'));
});

app.listen(port, function(err) {
  if (err) {
    console.log(err);
  } else {
    open(`http://localhost:${port}`);
  }
});

我对这个有点陌生，我真的很感激任何意见，非常感谢

编辑：这是我的webpack.config.prod

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: [
        // 'react-hot-loader/patch',
        // 'webpack-dev-server/client?http://localhost:8080',
        // 'webpack/hot/only-dev-server',
        // './index.js'
        '../src/index.js'
    ],

    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/'
    },

    context: path.resolve(__dirname, 'src'),

    devtool: 'inline-source-map',
    // 
    // devServer: {
    //     hot: true,
    //     contentBase: path.resolve(__dirname, 'dist'),
    //     publicPath: '/',
    //     historyApiFallback: true
    // },

    module: {
        rules: [
            {
                test: /\.js$/,
                use: [
                    'babel-loader',
                ],
                exclude: /node_modules/
            },
            {
                test: /\.(scss)$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /\.(png|jpg|woff|woff2|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/,
                use: 'url-loader?limit=100000'
            }
        ],
    },

    plugins: [
        new webpack.optimize.UglifyJsPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin(),
        new HtmlWebpackPlugin({
            template: './index.html'
        }),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
        }),
        new webpack.IgnorePlugin(/^(net|http|child_process|timers|dns|fs|zlib)$/)
    ]
};

---

默认情况下，Heroku上的

NPM\u CONFIG\u PRODUCTION

设置为

true

，因此不安装

devdependencies

。 您应该将生产构建中需要的依赖项移动到

依赖项

或将

NPM\u CONFIG\u生产设置为false（不推荐）：

heroku config:set NPM\u config\u PRODUCTION=false

顺便说一下，您应该创建并声明应用程序的dynos运行哪些命令，并使用
node
而不是
nodemon
来运行服务器：

web:node tools/publicServer.js-d--config webpack.config.prod.js--content base dist/--progress--colors
默认情况下，Heroku上的
NPM\u config\u PRODUCTION
设置为
true
，因此
devdependencies
未安装。
您应该将生产构建中需要的依赖项移动到
依赖项
或将
NPM\u CONFIG\u生产设置为false（不推荐）：

heroku config:set NPM\u config\u PRODUCTION=false

顺便说一下，您应该创建并声明应用程序的dynos运行哪些命令，并使用
node
而不是
nodemon
来运行服务器：

web:node-tools/publicServer.js-d--config-webpack.config.prod.js--content-base-dist/--progress--colors
非常感谢您的输入！在尝试了所有这些之后，我得到了相同的（虽然更短）错误消息（在相同的错误多次出现之前，现在只出现一次）。你知道怎么处理吗？我最困惑的是，它给了我“werbpack dev server not found”错误，但我相当肯定，对dev server的所有引用都已从我的代码中删除。再次感谢您的输入。我认为webpack
run
方法需要dev服务器。您可以尝试将此依赖项移动到依赖项，或者使用
heroku prebuild
hook来运行您的构建过程。嗯，糟糕，仍然没有运气，并且会出现相同的错误。。这很奇怪，可能是我做了一些愚蠢的事情，但非常感谢你的回答-我会继续努力纠正这一点。非常感谢你的投入！在尝试了所有这些之后，我得到了相同的（虽然更短）错误消息（在相同的错误多次出现之前，现在只出现一次）。你知道怎么处理吗？我最困惑的是，它给了我“werbpack dev server not found”错误，但我相当肯定，对dev server的所有引用都已从我的代码中删除。再次感谢您的输入。我认为webpack
run
方法需要dev服务器。您可以尝试将此依赖项移动到依赖项，或者使用
heroku prebuild
hook来运行您的构建过程。嗯，糟糕，仍然没有运气，并且会出现相同的错误。。这很奇怪，可能是我做的傻事，不过非常感谢你的回答——我会继续努力纠正这一点。
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: [
        // 'react-hot-loader/patch',
        // 'webpack-dev-server/client?http://localhost:8080',
        // 'webpack/hot/only-dev-server',
        // './index.js'
        '../src/index.js'
    ],

    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/'
    },

    context: path.resolve(__dirname, 'src'),

    devtool: 'inline-source-map',
    // 
    // devServer: {
    //     hot: true,
    //     contentBase: path.resolve(__dirname, 'dist'),
    //     publicPath: '/',
    //     historyApiFallback: true
    // },

    module: {
        rules: [
            {
                test: /\.js$/,
                use: [
                    'babel-loader',
                ],
                exclude: /node_modules/
            },
            {
                test: /\.(scss)$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /\.(png|jpg|woff|woff2|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/,
                use: 'url-loader?limit=100000'
            }
        ],
    },

    plugins: [
        new webpack.optimize.UglifyJsPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin(),
        new HtmlWebpackPlugin({
            template: './index.html'
        }),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
        }),
        new webpack.IgnorePlugin(/^(net|http|child_process|timers|dns|fs|zlib)$/)
    ]
};