Question

需要一点帮助。我们曾尝试部署反应项目，但我们无法对其进行配置。

我们使用：es6，webpack，redux，react，babel。

这是webpack基础：

import ExtractTextPlugin from 'extract-text-webpack-plugin';
import HtmlWebpackPlugin from 'html-webpack-plugin';

export default {
  entry: './app/app.js',
  output: {
    path: './app/App/dist',
    filename: '/bundle.js',
  },
  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: 'json',
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('css!sass'),

      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('css!sass'),
      },
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.svg$/,
        loader: 'babel?presets[]=es2015,presets[]=react!svg-react',
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './app/App/index.html',
    }),
    new ExtractTextPlugin('/app/App/css/default.css', {
      allChunks: true,
    }),
  ],
};

webpack dev：

import webpack from 'webpack';
import baseConfig from './webpack.config.base';

const config = {
  ...baseConfig,
  debug: true,
  devtool: 'cheap-module-eval-source-map',
  plugins: [
    ...baseConfig.plugins,
    new webpack.HotModuleReplacementPlugin(),
  ],
  devServer: {
    colors: true,
    historyApiFallback: true,
    inline: true,
    hot: true,
  },
};
export default config;

webpack prod：

import webpack from 'webpack';
import baseConfig from './webpack.config.base';

const config = {
  ...baseConfig,
  plugins: [
    ...baseConfig.plugins,
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production'),
      },
    }),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        screw_ie8: true,
        warnings: false,
      },
    }),
  ],
};
export default config;

这是我们的实际webpack，我们正在尝试使用它部署项目，但不起作用。

有没有人知道如何配置它？

Answer 1

所以，这可能是一个服务器问题。您需要HTTP服务器才能为静态文件（基本上是您的应用程序）提供服务。我推荐使用Ngxin，非常容易配置和使用。

安装nginx后，删除/etc/nginx/sites-enable/default文件并创建一个新文件（您可以在此处使用您想要的任何名称）。这是我使用的配置：

server {
    listen 80;
    listen [::]:80;

    server_name example.com;

    location / {
        root /var/html/myProject/;
        try_files $uri /index.html;
    }
}

之后，重新启动nginx并准备好了。

对于webpack，我有一个更简单的配置，效果很好：

const path = require("path");
const webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');

const isProd = process.env.NODE_ENV && process.env.NODE_ENV.toLowerCase() == 'production';

const plugins = [
  new ExtractTextPlugin(isProd ? 'bundle.[hash].css' : 'bundle.css', { allChunks: true }),
  new HtmlWebpackPlugin({
    template: 'index.html',
    inject: 'body',
    filename: 'index.html'
  }),
  new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
  })
];

const prodPlugins = [
  new webpack.optimize.DedupePlugin(),
  new webpack.optimize.UglifyJsPlugin(),
  new webpack.optimize.AggressiveMergingPlugin()
];

module.exports = {
  devtool: isProd ? 'cheap-module-source-map' : 'eval',
  entry: [
    './src/index.jsx'
  ],
  output: {
    path: isProd ? path.join(__dirname, 'dist') : __dirname,
    publicPath: '/',
    filename: isProd ? 'bundle.[hash].js' : 'bundle.js'
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['react', 'es2015', 'stage-1']
      }
    },
    {
      test: /\.(scss|css|sass)$/,
      loader: ExtractTextPlugin.extract('css!sass')
    },
    {
      test: /\.(png|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      loader: 'url'
    },
    {
      test: /\.html$/,
      loader: 'html'
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  },
  plugins: isProd ? prodPlugins.concat(plugins) : plugins
};

几点：

我正在使用SASS
在运行任何内容之前检查路径
要进行生产编译，只需运行NODE_ENV=production webpack -p
我正在为Uglify JS使用一些插件并压缩文件。

我认为就是这样！干杯！

Answer 2

我认为解决问题的最快方法是点击此链接：

React starter kit

并选择与您的技术相匹配的任何首发！

我认为你正在寻找这个：react-boilerplate

配置react webpack以进行部署

2 个答案: