將react / node應用程序部署到heroku時出現webpack-dev-server錯誤

Question

我在向Heroku部署React / Express應用程序時遇到問題。 我收到了“未找到Webpack-dev-server”錯誤，但我不再認為我正在使用開發服務器，因為我開始使用我的節點服務器。

Heroku錯誤的圖片

下面是我的package.json（只是dev依賴項）

  "scripts": {
    "start": "nodemon tools/publicServer.js -d --config 
              webpack.config.prod.js --content-base dist/ --progress --colors",
    "clean": "npm run remove && mkdir dist",
    "remove": "node_modules/.bin/rimraf ./dist",
    "build:html": "babel-node tools/buildHtml.js",
    "prebuild": "npm-run-all clean build:html",
    "build": "babel-node tools/build.js",
    "postbuild": "babel-node tools/publicServer.js"
  },
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-core": "^6.13.2",
    "babel-eslint": "^7.1.1",
    "babel-loader": "^6.2.4",
    "babel-polyfill": "^6.16.0",
    "babel-preset-es2015": "^6.13.2",
    "babel-preset-react": "^6.11.1",
    "babel-preset-react-hmre": "^1.1.1",
    "babel-preset-stage-1": "^6.16.0",
    "babel-preset-stage-2": "^6.13.0",
    "concurrently": "^2.1.0",
    "cross-env": "^1.0.7",
    "css-loader": "^0.23.1",
    "eslint": "3.2.2",
    "eslint-config-airbnb": "10.0.0",
    "eslint-loader": "1.5.0",
    "eslint-plugin-import": "1.12.0",
    "eslint-plugin-jsx-a11y": "2.0.1",
    "eslint-plugin-mocha": "2.2.0",
    "eslint-plugin-react": "6.0.0",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.13.3",
    "file-loader": "^0.8.5",
    "html-webpack-plugin": "^2.28.0",
    "morgan": "^1.8.1",
    "node-sass": "^3.7.0",
    "postcss-loader": "^0.9.1",
    "react-hot-loader": "^3.0.0-beta.6",
    "rimraf": "^2.4.3",
    "sass-loader": "^3.1.2",
    "serve-favicon": "^2.4.2",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^2.4.1",
    "webpack-dev-middleware": "^1.10.1",
    "webpack-dev-server": "^2.4.2",
    "webpack-hot-middleware": "^2.17.1"
  },
  "engines": {
    "node": ">=4.0.0",
    "npm": ">=3.0.0"
  }
}

下面是我的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)$/)
    ]
};

Answer 1

默認情況下，Heroku上的NPM_CONFIG_PRODUCTION設置為true ，因此未安裝devDependecies 。 您應該將生產構建中所需的依賴項移動到dependencies或將NPM_CONFIG_PRODUCTION設置為false（不推薦）：

heroku config:set NPM_CONFIG_PRODUCTION=false 。

順便說一句，您應該創建一個Procfile並聲明應用程序的nodemon運行的命令，並使用node而不是nodemon來運行您的服務器：

web: node tools/publicServer.js -d --config webpack.config.prod.js --content-base dist/ --progress --colors