React-Router和webpack-dev-server重新加载

Question

我一直在使用react-router v4，注意到在重新加载时（例如localhost:8080/route1我Cannot Get route1 。我调查了一下，发现一种解决方案是为所有路由提供index.html（加上现在，bundle.js请求的静态文件）和react-router路由的行为符合预期。

但是现在我正在使用自己的服务器，因此无法获得webpack-dev-server的好处，例如在保存时重新加载，为快速重新编译而捆绑软件包的缓存等。

所以我的问题是我该怎么办？ 有没有办法允许webpack-dev-server处理react-router路由问题？ 还是我应该继续使用自己的服务器并通过某种方式模仿从webpack-dev-server获得的收益？ 或其他我没有考虑的东西。

Answer 1

我有一个类似的问题，可以通过在webpack.config.js中设置输出publicPath来解决。 这是文件夹结构：

project-folder
 -webpack.config.js
 -node_modules
 -src
 --index.html
 --js
 ---app
 ----index.bundle.js
 ----index.js

webpack.config.js

var path = require('path');

module.exports = {
  entry: {
    index: './src/js/app/index.js'
  },
  output: {
    path: path.resolve(__dirname, 'src/js/app'),
    filename: '[name].bundle.js',
    publicPath: '/src/js/app/',
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js']
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /(node_modules|bower_components)/
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            js: 'babel-loader',
            scss: 'vue-style-loader!css-loader!sass-loader'
          }
        }
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
          publicPath: 'js/app/',
        }
      }
    ]
  },
  devServer: {
    noInfo: true
  },
};