Reactjs React应用程序在组件文件夹（而不是项目根目录）中查找bundle.js

在我刷新嵌套路由（注册/电子邮件确认）后，控制台中会显示以下错误。然而，非嵌套路由不会出现此错误

我认为主要的问题是它在嵌套路由路径中搜索bundle.js和图像，而不是根路径

我的控制台中的错误：

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const BUILD_PATH = path.resolve( __dirname, "./client/build" );
const SOURCE_PATH = path.resolve( __dirname, "./client/src" );
const PUBLIC_PATH = "/";

...

module.exports = {
  devtool: 'eval-source-map',

  context: SOURCE_PATH,

  entry: ['babel-polyfill', SOURCE_PATH + '/index.jsx'],

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: [/node_modules/, /server/],
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env', 'es2015', 'react', 'stage-1', 'stage-0', 'stage-2'],
            plugins: [
              'transform-decorators-legacy',
              'transform-es2015-destructuring',
              'transform-es2015-parameters',
              'transform-object-rest-spread'
            ]
          }
        }
      },
      {
        test: /\.scss$/,
          use: [{
            loader: "style-loader"
          }, {
            loader: "css-loader"
          }, {
            loader: "sass-loader"
          }]
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {}
          }
        ]
      },
    ],
  },

  output: {
    path: BUILD_PATH,
    filename: "bundle.js",
  },

  devServer: {
    compress: true,
    port: 3002,
    historyApiFallback: true,
    contentBase: BUILD_PATH,
    publicPath: PUBLIC_PATH,
  },

  plugins: [
    new webpack.DefinePlugin(appConstants),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(__dirname, 'client/src/index.html'),
      inject: true
    }),
  ],

  watch: true,
}

GEThttp://localhost:3002/register/bundle.js net:：ERR_中止

拒绝从执行脚本'http://localhost:3002/register/bundle.js'因为其MIME类型（'text/html'）不可执行，并且启用了严格的MIME类型检查。

GEThttp://localhost:3002/register/a5e694be93a1c3d22b85658bdc30008b.png 404（未找到）

mywebpack.config.js:

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const BUILD_PATH = path.resolve( __dirname, "./client/build" );
const SOURCE_PATH = path.resolve( __dirname, "./client/src" );
const PUBLIC_PATH = "/";

...

module.exports = {
  devtool: 'eval-source-map',

  context: SOURCE_PATH,

  entry: ['babel-polyfill', SOURCE_PATH + '/index.jsx'],

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: [/node_modules/, /server/],
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env', 'es2015', 'react', 'stage-1', 'stage-0', 'stage-2'],
            plugins: [
              'transform-decorators-legacy',
              'transform-es2015-destructuring',
              'transform-es2015-parameters',
              'transform-object-rest-spread'
            ]
          }
        }
      },
      {
        test: /\.scss$/,
          use: [{
            loader: "style-loader"
          }, {
            loader: "css-loader"
          }, {
            loader: "sass-loader"
          }]
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {}
          }
        ]
      },
    ],
  },

  output: {
    path: BUILD_PATH,
    filename: "bundle.js",
  },

  devServer: {
    compress: true,
    port: 3002,
    historyApiFallback: true,
    contentBase: BUILD_PATH,
    publicPath: PUBLIC_PATH,
  },

  plugins: [
    new webpack.DefinePlugin(appConstants),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(__dirname, 'client/src/index.html'),
      inject: true
    }),
  ],

  watch: true,
}

---

我不知道这个bug，但我强烈建议使用

是构建系统的未来，在几分钟内，您将使用高速热加载和许多其他实用程序运行您的项目

---

检查这个，它令人难以置信地惊奇。

我不知道这个错误，但我强烈建议使用

是构建系统的未来，在几分钟内，您将使用高速热加载和许多其他实用程序运行您的项目

---

检查这个，它令人难以置信地惊奇。

可以肯定地支持这个答案。最近将我们的项目从Webpack移植到FuseBox，不再回头。我们的项目非常复杂，我们的构建过程使用了一些需要动态导入的节点环境变量等等，所以让它工作起来有点棘手，但好处远远超过了让它工作的时间。但要让我的游乐场应用程序转换并运行，以便测试FuseBox功能，可能需要5分钟：）可以肯定地支持这个答案。最近将我们的项目从Webpack移植到FuseBox，不再回头。我们的项目非常复杂，我们的构建过程使用了一些需要动态导入的节点环境变量等等，所以让它工作起来有点棘手，但好处远远超过了让它工作的时间。但要让我的游乐场应用程序转换并运行，以便在其中测试FuseBox功能，可能需要5分钟：）