使用我使用 webpack -p 编译的快速服务器将构建部署到生产环境

Question

我想将我的应用程序部署到生产环境。使用 webpack -p 构建我的包后，我不知道该怎么做。如何使用快速节点服务器在生产环境中提供此捆绑包。

我的 webpack.config.js 文件

var HtmlWebpackPlugin = require('html-webpack-plugin')
var debug = process.env.NODE_ENV !== "production";
var webpack = require("webpack");

var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = {
  devtool: debug ? "inline-sourcemap" : null,
  entry: [
    './app/index.js'
  ],
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: "index_bundle.js"
  },
  module: {
    loaders: [
      {test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"}
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  plugins: debug ? [HTMLWebpackPluginConfig] : [
    HTMLWebpackPluginConfig,
    new webpack.optimize.CommonsChunkPlugin('common.js'),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
    new webpack.optimize.AggressiveMergingPlugin()
  ],
};

我的 package.json 文件

{
  "name": "my-web",
  "version": "1.0.0",
  "description": "Practicing react-website",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --hot --port 8080 --host 0.0.0.0 --content-base dist/ --history-api-fallback",
    "prod": "NODE_ENV=production webpack -p",
    "postinstall": "npm start"
  },
  "dependencies": {
    "axios": "^0.15.0",
    "express": "^4.14.0",
    "radium": "^0.18.1",
    "react": "^15.3.2",
    "react-dom": "^15.3.2",
    "react-router": "^2.8.1"
  },
  "devDependencies": {
    "babel-core": "^6.17.0",
    "babel-loader": "^6.2.5",
    "babel-preset-react": "^6.16.0",
    "html-webpack-plugin": "^2.22.0",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.16.1"
  }
}

注意：npm start 运行在本地主机上非常好。所以我使用 webpack -p 在 ./dist 文件夹中创建包。需要从这里开始。

也欢迎就更好的部署方式提出建议。

Answer 1

您现在需要使用 express 提供 dist 文件夹的内容，这里是您可以用作示例的基本实现：

在您的 .文件夹（与 dist 文件夹在同一个文件夹中）

app.js

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

var app = express();

app.use(express.static(path.join(__dirname, '/dist')));

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

app.listen(80, function() {
  console.log("App is running at localhost: 80")
});

然后，运行 node app.js，如果出现EACCES错误，运行 sudo node app.js 代替。此运行在 http://localhost 本地保存您的生产文件。

如果你想将其部署到其他地方（例如，heroku https://devcenter.heroku.com/articles/getting-started-with-nodejs#introduction），你必须查看他们的说明。

使用我使用 webpack -p 编译的快速服务器将构建部署到生产环境

Deploying build to production using express server which i compiled using webpack -p

deployment

production

config

reactjs

webpack