如何通过 server.js 通过 webpack 生成 react bundle.js？答案

【问题标题】：How to produce react bundle.js through webpack via server.js?如何通过 server.js 通过 webpack 生成 react bundle.js？
【发布时间】：2017-12-21 06:18:23
【问题描述】：

服务器.js

var express = require('express');

app.use(express.static('public'));

app.listen(PORT, function () {
  console.log('Express server is up on port ' + PORT);
});

Webpack.config.js

var path = require('path');
var webpack  = require('webpack');

var ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractSass = new ExtractTextPlugin({

});
// const autoprefixer = require('autoprefixer');
module.exports = {
    entry: path.resolve(__dirname, 'src', 'Main.js'),
    output: {
        path: __dirname,
        publicPath: '/',
        filename: 'bundle.js'
    },
    module: {
        loaders: [{
            exclude: /node_modules/,
            test: /\.js$/,
            loader: 'babel-loader',
            query: {
                presets: ['react', 'es2015', 'stage-1'],
                plugin

s: ["react-html-attrs"]
            }
        }
        , {
        test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
        loader: 'url-loader?limit=10000',
    },
     {




test: /masonry|imagesloaded|fizzy\-ui\-utils|desandro\-|outlayer|get\-size|doc\-ready|eventie|eventemitter/,
    loader: 'imports-loader?define=>false&this=>window'
        },
         {
            test: /\.css$/,
            loader: "style-loader!css-loader"
        },

        {
         test: /\.scss$/,
        loaders: ["style-loader", "css-loader", "sass-loader"]
        }]
    },
    plugins: [
        extractSass

    ],


 resolve: {
        extensions: ['.js', '.jsx', '.css', '.scss'],
    },
    devServer: {
        historyApiFallback: true,
        contentBase: './',
}
};

我正在尝试在 Heroku 上进行部署，但在此之前，当我通过 npm start 在 cmd 上运行时，它会在 localhost 上启动，但是说 Cannot GET / 并且没有其他运行，但是当我传递 cmd webpack-dev 时-server --config webpack.config.js 它在 localhost 8080 上运行并且工作正常！在部署 heroku 之前，我需要添加 serve.js 我缺少什么？

【问题讨论】：

你能粘贴你Procfile的内容吗？ devcenter.heroku.com/articles/…
网络：捆绑 exec unicorn -p $PORT -c ./config/unicorn.rb
我错过了 app.get('*', function(req, res) { res.sendFile(path.resolve(__dirname, 'public/index.html')); });在 .listen 之前我已经添加了这个，但是现在 localhost 正在运行，但是 DOM 上没有任何 UI。

标签： node.js reactjs express webpack react-router

【解决方案1】：

确保您有一个名为 Procfile 的文件，其中包含 web: <command to run your project>。该命令可能是node server.js 或其他依赖于Webpack 的东西，它有一个Production Guide here（可能是webpack -p）。

【讨论】：