デプロイのために反応するWebpackを設定する

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：これは私たちの実際のWebPACKある

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; 

、我々がプロジェクトを展開しようとしていますそれは動作しません。

どのように構成するのか考えている人はいますか？

Answer 1

私はあなたの問題を解決するための最速の方法は、このリンクをクリックすることだと思うしてください：

React starter kit

とあなたの技術に一致するすべてのスターターを選択！

私は、あなたはこの1つを探していると思う：react-boilerplate

Answer 2

ので、それはおそらく、サーバーの問題です。静的ファイル（基本的にあなたのアプリ）をサーバーするためには、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のため

、私はうまく機能シンプルな設定があります：私はSASS

は、パスの前に実行して何も

を確認し使用してい

• ：

  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 
  }; 
  

  いくつかのポイントをプロダクション用にコンパイルするには、ちょうど実行してくださいNODE_ENV=production webpack -p

• 私はUgliにいくつかのプラグインを使用していますJSと圧縮ファイル。

私はそれだと思います！乾杯！