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

Question

我一直在使用react-router v4，並注意到在重新加載（例如localhost:8080/route1我得到Cannot Get route1。我研究了這個，發現一個解決方案是爲您的索引.html所有路由（加上bundle.js請求的靜態文件）和反應路由器路由現在的行爲如預期的那樣

但是現在我使用自己的服務器，我沒有得到webpack的好處-dev-server，例如保存時重新加載，快速重新編譯的緩存等。

所以我的問題是我該怎麼辦？有沒有辦法讓webpack-dev-server處理反應路由器路由問題？或者我應該繼續我的自己的服務器和罰款一些方法來模仿我從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 
    }, 
};