Running React App auf Nginx - Fehler in Chrom

Question

Ich bin eine Reag-App von Webpack-Dev-Server auf Nginx Übergang.

Ich baue das Quellpaket mit webpack und gebe es im wwwroot Ordner für nginx aus. Das funktioniert.

Wenn ich auf den Stamm der App localhost: 8080/mit chrome zugreifen, hört es auf zu laden, nachdem das ursprüngliche HTML geladen wurde. Wenn ich Protokolle aussehen nginx ich sehe:

my-nginx-container | 2017/05/12 20:52:42 [error] 6#6: *4 "/wwwroot/react-draggable.js.map/index.html" is not found (2: No such file or directory), client: 172.20.0.1, server: , request: "GET /react-draggable.js.map// HTTP/1.1", host: "localhost:8080" 
my-nginx-container | 172.20.0.1 - - [12/May/2017:20:52:42 +0000] "GET /react-draggable.js.map// HTTP/1.1" 404 169 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:53.0) Gecko/20100101 Firefox/53.0" "-" 
my-nginx-container | 172.20.0.1 - - [12/May/2017:20:52:43 +0000] "GET /react-image-lightbox.js.map// HTTP/1.1" 404 169 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:53.0) Gecko/20100101 Firefox/53.0" "-" 
my-nginx-container | 2017/05/12 20:52:43 [error] 6#6: *4 "/wwwroot/react-image-lightbox.js.map/index.html" is not found (2: No such file or directory), client: 172.20.0.1, server: , request: "GET /react-image-lightbox.js.map// HTTP/1.1", host: "localhost:8080" 

Wenn ich die gleiche Sache in firefox tun lädt es in Ordnung.

gibt es eine lange thread darüber, und nach dem Versuch, es für Stunden zu sortieren, habe ich aufgegeben !!

Hat jemand hier etwas Weisheit.

Meine webpack config:

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

var BUILD_DIR = '/wwwroot' //path.resolve(__dirname, 'src/client/public'); 
var APP_DIR = path.resolve(__dirname, 'src/client/app'); 

var config = { 
    resolve: { 
    extensions: ['.js', '.jsx', '.scss'], 
    alias: { 
     jquery: "jquery/src/jquery" 
    } 
    }, 
    entry: { 
    main: APP_DIR + '/index.jsx', 
    }, 
    output: { 
    publicPath: './', 
    path: BUILD_DIR, 
    filename: '[name].js', 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?/, 
     include: APP_DIR, 
     loader: 'babel-loader', 
     query: { 
      presets: ['react', 'es2015', 'stage-0', 'stage-1'], 
      plugins: [ 
      'react-html-attrs', 
      'transform-class-properties', 
      'transform-decorators-legacy', 
      ], 
     }, 
     }, 
     { test: /.(woff|woff2|eot|ttf)$/, loader: 'url-loader?prefix=font/&limit=5000', }, 
     { test: /\.(scss|css)$/, loader: ExtractTextPlugin.extract('css-loader!sass-loader'), }, 
    ], 
    }, 
    devtool: 'eval-source-map', 
    plugins: [ 
    new webpack.ProvidePlugin({ 
     'Promise': 'es6-promise', 
     'fetch': 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch' 
    }), 
    new ExtractTextPlugin("[name].css"), 
    new webpack.ProvidePlugin({ 
     $: "jquery", 
     jQuery: "jquery" 
    }), 
    new HtmlWebpackPlugin({ 
     title: 'PhotoTank', 
     template: 'src/client/app/html-template.ejs', 
     filename: '/wwwroot/index.html' 
    }) 
    ], 

    devServer: { 
    contentBase: path.resolve(__dirname, 'src/client'), 
    proxy: { 
     "/api": { 
      target: "http://192.168.2.189:3000", 
      pathRewrite: {"^/api" : ""} 
     } 
    }, 
    historyApiFallback: true 
    }, 

}; 

module.exports = config; 

Answer 1

Im webpack Konfigurationsänderung :

devtool: 'eval-source-map'

zu

devtool: '#inline-source-map'

Answer 2

vorgeschlagen Wie @jonathandion

Im webpack Config ändern:

devtool: 'eval-source-map' 

zu

devtool: '#inline-source-map'