![webpack4]( "webpack4")
本文介绍了webpack-dev-server，historyApiFallback 不工作(webpack-4，react-router-4)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在用 webpack4 测试 react-router4，但是我无法获得 webpack-dev-server 的设置:
{historyApiFallback: true}
上班.这个用法在 webpack3 中工作得很好，所以我不确定是什么问题......这是我的 webpack.config.js:
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = () =>{返回 {模式:'发展'，开发工具:'源地图'，开发服务器:{端口:8888，historyApiFallback: 真,统计数据:'最小'},解决: {扩展名:['*', '.mjs', '.js', '.jsx']},模块: {规则: [{测试:/\.m?jsx?$/,排除:/(节点模块)/，用: {loader: 'babel-loader'}}]},插件: [新的 HtmlWebpackPlugin({标题:'反应实验室'，模板:'src/index.html'})]}}
这是我使用 react-router4 的简单反应应用程序:
从'react'导入React；从 'react-dom' 导入 ReactDOM；进口 {BrowserRouter 作为路由器，路线，关联，转变来自'反应路由器-dom';const mountNode = document.getElementById('app');const App = () =>(<路由器><div><ul><li><Link to="/">链接到://Link></li><li><Link to="/page1">链接到:/page1</Link></li><li><Link to="/page2">链接到:/page2</Link></li><li><Link to="/does/not/exist">链接到:/does/not/exist</Link></li><button onClick={()=>{location.reload();}}>重新加载页面</button><开关><路由精确路径="/" component={()=>(<h2>home</h2>)}/><路由精确路径="/page1" component={()=>(<h2>page1</h2>)}/><路由精确路径="/page2" component={()=>(<h2>page2</h2>)}/><路由组件={()=>(<h2>不匹配</h2>)}/></开关><Route path="/" component={(props) =><div>{`props.location.pathname: ${props.location.pathname}`}</div>}/>
</路由器>);ReactDOM.render( <App/>, mountNode
导航到:
然后点击
webpack 开发服务器无法重定向到 main.js
这里是github上的完整代码:https://github.com/ApolloTang/webpack-dev-server-history-api-fall-back-not-working.
任何帮助或评论将不胜感激.
解决方案
原来我在 webpack.config.js 中缺少 output.publicPath:
输出:{//必须指定 output.publicPath 否则//devServer.historyApiFallback 不起作用公共路径:'/'},
使用如上指定的 output.publicPath，historyApiFallback 有效.
我不记得我在哪里读过说 output.publicPath 在 webpack4 的配置中是一个可选的，但它确实需要与 webpack-dev-server 一起使用.
https://webpack.js.org/configuration/output 上的文档/#output-publicpath 说:
webpack-dev-server 也从 publicPath 得到一个提示，用它来确定从哪里提供输出文件.
但我不明白这与 historyApiFallback 有什么关系.
I am testing out react-router4 with webpack4, but I can't get webpack-dev-server's setting:
{historyApiFallback: true}
to work. This use to work just fine in webpack3, so I am not sure what is wrong... Here is my webpack.config.js:
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = () => {
return {
mode: 'development',
devtool: 'source-map',
devServer: {
port: 8888,
historyApiFallback: true,
stats: 'minimal'
},
resolve: {
extensions: ['*', '.mjs', '.js', '.jsx']
},
module: {
rules: [
{
test: /\.m?jsx?$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
title:'React Lab',
template: 'src/index.html'
})
]
}
}
and here is my simple react app with react-router4:
import React from 'react';
import ReactDOM from 'react-dom';
import {
BrowserRouter as Router,
Route,
Link,
Switch
} from 'react-router-dom';
const mountNode = document.getElementById('app');
const App = () => (
<Router>
<div>
<ul>
<li><Link to="/">Link to: /</Link></li>
<li><Link to="/page1">Link to: /page1</Link></li>
<li><Link to="/page2">Link to: /page2</Link></li>
<li><Link to="/does/not/exist">Link to: /does/not/exist</Link></li>
</ul>
<button onClick={()=>{location.reload();}}>reload page</button>
<Switch>
<Route exact path="/" component={()=>(<h2>home</h2>)} />
<Route exact path="/page1" component={()=>(<h2>page1</h2>)} />
<Route exact path="/page2" component={()=>(<h2>page2</h2>)} />
<Route component={()=>(<h2>no match</h2>)} />
</Switch>
<Route path="/" component={(props) =><div>{`props.location.pathname: ${props.location.pathname}`}</div>} />
</div>
</Router>
);
ReactDOM.render( <App/>, mountNode
After navigating to:
<Link to="/does/not/exist" />
and click
<button>reload page</button>
webpack dev server fail to redirect to main.js
Here is the complete code at github:https://github.com/ApolloTang/webpack-dev-server-history-api-fall-back-not-working.
Any help or comment would greatly appreciated.
解决方案
It turns out that I am missing output.publicPath in webpack.config.js:
output: {
// must specified output.publicPath otherwise
// devServer.historyApiFallback will not work
publicPath: '/'
},
with output.publicPath specified as above, historyApiFallback works.
I can't remember where I have read that said output.publicPath is an optional in webpack4's configuration, but it does required to work with webpack-dev-server.
The documentation at https://webpack.js.org/configuration/output/#output-publicpath said:
But I don't understand how is this to do with hisitoryApiFallback.
这篇关于webpack-dev-server，historyApiFallback 不工作(webpack-4，react-router-4)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！