运行在 nginx 上反应应用程序 - chrome 中的错误

Question

我正在将一个 React 应用从 webpack-dev-server 转移到 nginx。

我正在使用 webpack 构建源包并将其输出到 nginx 的 wwwroot 文件夹。这行得通。

当我使用 chrome 访问应用程序 localhost:8080/ 的根目录时，它会在加载初始 html 后停止加载。当我查看 nginx 日志时，我看到了这个：

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"

如果我在 firefox 中做同样的事情，它加载正常。

关于这个有一个很长的 thread，在尝试解决几个小时后我放弃了！！

这里有没有人有一些智慧。

我的 webpack 配置：

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

正如@jonathandion 所建议的

在 webpack 配置中更改：

devtool: 'eval-source-map'

到

devtool: '#inline-source-map'

Answer 2

在 webpack 配置中更改：

devtool: 'eval-source-map'

至

devtool: '#inline-source-map'

运行在 nginx 上反应应用程序 - chrome 中的错误

Running react app on nginx - error in chrome

nginx

source-maps

webpack

运行 在 nginx 上反应应用程序 - chrome 中的错误

Running react app on nginx - error in chrome

nginx

source-maps

webpack

运行在 nginx 上反应应用程序 - chrome 中的错误