React Webpack生产设置

Question

我试图将我的ReactJS网站投入生产。但是，我相信我的服务器和webpack的设置并不好，因此无法在Heroku上加载构建的CSS和js。有人可以查看我的设置吗？

server.js：

const path = require('path');
const express = require('express');
const compression = require('compression');
const minify = require('express-minify');
const webpack = require('webpack');
const webpackMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const config = require('./webpack.config.js');
const app = express();

/** *************************** Environment Setup ************************** **/
const isDeveloping = process.env.NODE_ENV !== 'production';
const port = isDeveloping ? 2333 : process.env.PORT;

/** ****************************** Output Setup **************************** **/
if (isDeveloping) {
  const compiler = webpack(config);
  const middleware = webpackMiddleware(compiler, {
    publicPath: config.output.publicPath,
    contentBase: 'src',
    stats: {
      colors: true,
      hash: false,
      timings: true,
      chunks: false,
      chunkModules: false,
      modules: false
    }
  });
  app.use(middleware);
  // Compress everything to speedup
  app.use(compression({threshold: 0}));
  // Minify and cache everything
  app.use(minify());
  app.use(webpackHotMiddleware(compiler));
  app.get('*', function response(req, res) {
    res.sendFile(path.join(__dirname, '/dist'));
    res.end();
  });
} else {
  // Compress everything to speedup
  app.use(compression({threshold: 0}));
  // Minify and cache everything
  app.use(minify());
  app.use(express.static(__dirname + '/dist'));
  app.get('*', function response(req, res) {
    res.sendFile(path.join(__dirname, '/dist'));
  });
}

/** **************************** Server Running **************************** **/
app.listen(port, '0.0.0.0', function onStart(err) {
  if (err) {
    console.log(err);
  }
  console.info('==>  Listening on port %s.', port);
});

webpack.production.config.js：

'use strict';

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var StatsPlugin = require('stats-webpack-plugin');

module.exports = {
  entry: [
    path.join(__dirname, 'app/App.jsx')
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name]-[hash].min.js',
    publicPath: '/dist/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new HtmlWebpackPlugin({
      template: 'app/index.tpl.html',
      inject: 'body',
      filename: 'index.html'
    }),
    new ExtractTextPlugin('[name]-[hash].min.css'),
    new webpack.optimize.UglifyJsPlugin({
      minimize: true,
      compressor: {
        warnings: false,
        screw_ie8: true
      }
    }),
    new StatsPlugin('webpack.stats.json', {
      source: false,
      modules: false
    }),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
  ],
  resolve: {
    root: path.resolve('./'),
    alias: {
      jsx: 'app/jsx',
      components: 'app/jsx/components',
      utils: 'app/jsx/utils'
    },
    extensions: ['', '.js', '.jsx']
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        "presets": ["es2015", "stage-0", "react"]
      }
    }, {
      test: /\.json?$/,
      loader: 'json'
    }, {
      test: /\.css$/,
      loader: ExtractTextPlugin.extract('style', 'css?modules&localIdentName=[name]---[local]---[hash:base64:5]!postcss')
    }, {
      test: /img.*\.(jpg|jpeg|gif|png|svg)$/i,
      loader: 'url-loader?name=/app/img/[name].[ext]'
    }, {
      test: /\.ico$/,
      loader: 'file-loader?name=app/img/[name].[ext]'
    }]
  },
  postcss: [
    require('autoprefixer')
  ]
};

package.json脚本：

...
"scripts": {
    "test": "",
    "start": "node server",
    "build": "rimraf dist && cross-env NODE_ENV=production webpack --config ./webpack.production.config.js --progress --profile --colors",
    "eslint": "eslint .",
    "jscs": "jscs .",
    "prod": "NODE_ENV=production node server",
    "postinstall": "npm run build"
  },
...

感谢您的帮助。