Question

当我将它部署到heroku时，它会显示一个完全不同的网站比我运行'npm run start'时显示的更多。

为什么会这样？

我正在运行React + Webpack + Express。它显示的网站是我用作启动包的网站，因此我猜测网站中有一行代码误导了Heroku。我找不到它。这是我的回购：https://github.com/adamskriger/calendar/

这是我的webpack.config.js。

const path = require('path');
const merge = require('webpack-merge');
const webpack = require('webpack');
const NpmInstallPlugin = require('npm-install-webpack-plugin');
const TARGET = process.env.npm_lifecycle_event;

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const pkg = require('./package.json');

const PATHS = {
  app: path.join(__dirname, 'app'),
  build: path.join(__dirname, 'build')
};

process.env.BABEL_ENV = TARGET;

const common = {
  entry: {
    app: PATHS.app
  },
  // Add resolve.extensions
  // '' is needed to allow imports without an extension
  // note the .'s before the extension as it will fail to load without them
  resolve: {
    extensions: ['', '.js', '.jsx', '.json']
  },
  output: {
    path: PATHS.build,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        // Test expects a RegExp! Notethe slashes!
        test: /\.css$/,
        loaders: ['style', 'css'],
        //Include accepts either a path or an array of paths
        include: PATHS.app
      },
      //set up JSX. This accepts js too thanks to RegExp
      {
      test: /\.(js|jsx)$/,
      //enable caching for improved performance during development
      //It uses default OS directory by default. If you need something more custom,
      //pass a path to it. ie: babel?cacheDirectory=<path>
      loaders: [
        'babel?cacheDirectory,presets[]=es2015'
    ],
      //parse only app files Without this it will go thru the entire project.
      //beside being slow this will likely result in an error
      include: PATHS.app
      }
    ]
  }
};

// Default configuration. We will return this if
// Webpack is called outside of npm.
if(TARGET === 'start' || !TARGET){
  module.exports = merge(common, {
    devtool: 'eval-source-map',
    devServer: {
      contentBase: PATHS.build,

      //enable history API fallback so HTML5 HISTORY API based
      // routing works. This is a good default that will come in handy in more
      // complicated setups.
      historyApiFallback: true,
      hot: true,
      inline: true,
      progress: true,

      //display only errors to reduce output amount
      stats: 'errors only',

      //Parse host and port from env so this is easy to customize
      host: process.env.HOST,
      port: process.env.PORT

},

plugins: [
  new webpack.HotModuleReplacementPlugin(),
  new NpmInstallPlugin({
    save: true //--save
  })
]
});
}

if(TARGET === 'build' || TARGET === 'stats') {
  module.exports = merge(common, {
    entry: {
      vendor: Object.keys(pkg.dependencies).filter(function(v) {
        return v !== 'alt-utils';
      }),
      style: PATHS.style
    },
    output: {
      path: PATHS.build,
      // Output using entry name
      filename: '[name].[chunkhash].js',
      chunkFilename: '[chunkhash].js'
    },
    module: {
      loaders: [
        // Extract CSS during build
        {
          test: /\.css$/,
          loader: ExtractTextPlugin.extract('style', 'css'),
          include: PATHS.app
        }
      ]
    },
    plugins: [
      new CleanPlugin([PATHS.build]),
      // Output extracted CSS to a file
      new ExtractTextPlugin('[name].[chunkhash].css'),
      // Extract vendor and manifest files
      new webpack.optimize.CommonsChunkPlugin({
        names: ['vendor', 'manifest']
      }),
      // Setting DefinePlugin affects React library size!
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': '"production"'
      }),
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings: false
        }
      })
    ]
  });
}

这是我的package.json：

{
  "name": "Portfolio",
  "version": "1.0.0",
  "description": "Portfolio Site",
  "main": "server.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server"
  },
  "author": "Adam Kriger",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.7.7",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-react-hmre": "^1.1.1",
    "css-loader": "^0.23.1",
    "npm-install-webpack-plugin": "^3.0.0",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.0",
    "webpack-dev-server": "^1.14.1",
    "webpack-merge": "^0.12.0"
  },
  "dependencies": {
    "alt": "^0.18.4",
    "alt-container": "^1.0.2",
    "alt-utils": "^1.0.0",
    "babel-core": "^6.7.7",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-react-hmre": "^1.1.1",
    "babel-preset-survivejs-kanban": "^0.3.3",
    "body-parser": "^1.15.0",
    "bootstrap": "^3.3.6",
    "classnames": "^2.2.5",
    "clean-webpack-plugin": "^0.1.9",
    "components": "^0.1.0",
    "css-loader": "^0.23.1",
    "express": "^4.13.4",
    "extract-text-webpack-plugin": "^1.0.1",
    "firebase": "^2.4.2",
    "html-webpack-plugin": "^2.16.0",
    "json-loader": "^0.5.4",
    "moment": "^2.13.0",
    "morgan": "^1.7.0",
    "node-uuid": "^1.4.7",
    "npm-install-webpack-plugin": "^3.0.0",
    "react": "^15.0.1",
    "react-dom": "^15.0.2",
    "react-router": "^2.4.0",
    "reactfire": "^0.7.0",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.0",
    "webpack-dev-server": "^1.14.1",
    "webpack-merge": "^0.12.0"
  }
}

Answer 1

在heroku上部署时，它会查找已编译的构建，因为它的节点环境设置为＆＃34; production＆＃34;。您最有可能仍然在您决定要Webpack发送它的地方内部构建旧版本。在你的情况下它在哪里：

build: path.join(__dirname, 'build')

这就是您的旧网站所在的位置。我会在这里删除所有内容并进行另一次编译。然后再次提交并推送到heroku。

Heroku部署完全不同的应用程序

1 个答案: