historyApiFallback doesn't work in Webpack dev server

问题:

I use Webpack dev server and browserHistory in React Router to manipulate with urls by HTML5 History API. historyapifallback-option does not work in my webpack config file. After refreshing http://localhost:8080/users or http://localhost:8080/products I got 404.

webpack.config.js

var webpack = require('webpack'); var merge = require('webpack-merge');  const TARGET = process.env.npm_lifecycle_event;  var common = {     cache: true,     debug: true,     entry: './src/script/index.jsx',     resolve: {         extensions: ['', '.js', '.jsx']     },     output: {         sourceMapFilename: '[file].map'     },     module: {         loaders: [             {                 test: /\.js[x]?$/,                 loader: 'babel-loader',                 exclude: /(node_modules)/             }         ]     },     plugins: [         new webpack.ProvidePlugin({             $: "jquery",             jQuery: "jquery"         })     ] };  if(TARGET === 'dev' || !TARGET) {     module.exports = merge(common,{         devtool: 'eval-source-map',         devServer: {             historyApiFallback: true         },         output: {             filename: 'index.js',             publicPath: 'http://localhost:8090/assets/'         },         plugins: [             new webpack.DefinePlugin({                 'process.env.NODE_ENV': JSON.stringify('dev')             })         ]     }); } 

index.html

index.jsx

import React, {Component} from 'react'; import ReactDOM from 'react-dom'; import {Router, Route, useRouterHistory, browserHistory, Link} from 'react-router';  class Home extends Component{   constructor(props) {     super(props);   }    render() {       return 
           I am home component           Users           Products         
;   } }  class Users extends Component{   constructor(props) {     super(props);   }    render() {       return 
 I am Users component 
;   } }  class Products extends Component{   constructor(props) {     super(props);   }    render() {       return 
 I am Products component 
;   } }  ReactDOM.render(      window.scrollTo(0, 0)}>              , document.getElementById('content')); 

package.json

{   "name": "test",   "version": "1.0.0",   "description": "",   "main": "index.jsx",   "scripts": {     "start": "npm run serve | npm run dev",     "serve": "./node_modules/.bin/http-server -p 8080",     "dev": "webpack-dev-server -d --progress --colors --port 8090 --history-api-fallback"   },   "author": "",   "license": "MIT",   "dependencies": {     "events": "^1.1.0",     "jquery": "^2.2.3",     "path": "^0.12.7",     "react": "^15.0.2",     "react-dom": "^15.0.2",     "react-mixin": "^3.0.5",     "react-router": "^2.4.0"   },   "devDependencies": {     "babel": "^6.5.2",     "babel-core": "^6.8.0",     "babel-loader": "^6.2.4",     "babel-polyfill": "^6.8.0",     "babel-preset-es2015": "^6.6.0",     "babel-preset-react": "^6.5.0",     "babel-register": "^6.8.0",     "http-server": "^0.9.0",     "webpack": "^1.13.0",     "webpack-dev-server": "^1.14.1",     "webpack-merge": "^0.12.0"   } } 

I tried to change devServer in my config, but it didn't help:

devServer: {     historyApiFallback: {         index: 'index.html',     } },  devServer: {     historyApiFallback: {         index: 'index.js',     } },  devServer: {     historyApiFallback: {         index: 'http://localhost:8090/assets',     } },  devServer: {     historyApiFallback: {         index: 'http://localhost:8090/assets/',     } },  devServer: {     historyApiFallback: {         index: 'http://localhost:8090/assets/index.html',     } },  devServer: {     historyApiFallback: {         index: 'http://localhost:8090/assets/index.js',     } },  devServer: {     historyApiFallback: {         index: 'http://localhost:8090/assets/index.js',     } }, output: {     filename: 'index.js',             publicPath: 'http://localhost:8090/assets/' }, 

回答1:

I meet the same question today. let config in webpack.config.js: output.publicPath be equal to devServer.historyApiFallback.index and point out html file route。my webpack-dev-server version is 1.10.1 and work well. http://webpack.github.io/docs/webpack-dev-server.html#the-historyapifallback-option doesn't work, you must point out html file route.

for example

module.exports = {     entry: "./src/app/index.js",     output: {         path: path.resolve(__dirname, 'build'),         publicPath: 'build',         filename: 'bundle-main.js'     },     devServer: {         historyApiFallback:{             index:'build/index.html'         },     },     //其他的配置省略 }; 

historyApiFallback.index indicate that when url path not match a true file,webpack-dev-server use the file config in historyApiFallback.index to show in browser rather than 404 page. then all things about your route change let your js using react-router do it.

文章来源: historyApiFallback doesn't work in Webpack dev server