webpack 包在重新加载时失败? [英] webpack bundle fails on reload?
问题描述
我认为问题不在于反应路由器配置，而是我的 index.html 无法检测到我的脚本?这是我的错误:
I think the problem is not with react router configuration but my index.html not being able to detect my script? This is my error:
加载资源失败:服务器响应状态为 404(未找到)
Failed to load resource: the server responded with a status of 404 (Not Found)
这是我的 webpack 配置代码:
this is my webpack config code:
const compiler = webpack({
entry: ['whatwg-fetch', path.resolve(__dirname, 'js', 'index.js')],
module: {
loaders: [
{
exclude: /node_modules/,
loader: 'babel-loader',
test: /\.js$/,
},
{
test: /\.css$/,
loaders: ['style-loader', 'css-loader']
}
],
},
output: {filename: 'app.js', path: '/'},
});
const app = new WebpackDevServer(compiler, {
contentBase: '/public/',
proxy: {'/graphql': `http://localhost:${GRAPHQL_PORT}`},
publicPath: '/js/',
stats: {colors: true},
historyApiFallback: {
index: 'index.html'
}
});
和我的 index.html
and my index.html
<!doctype html>
<html lang="en" data-framework="relay">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.11/semantic.min.css">
<title>Relay • TodoMVC</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript">
// Force `fetch` polyfill to workaround Chrome not displaying request body
// in developer tools for the native `fetch`.
self.fetch = null;
</script>
<script src="http://localhost:4000/webpack-dev-server.js"></script>
<script src="js/app.js"></script>
</body>
</html>
帮助?
推荐答案
当使用 HTML5 History API 时，可能必须提供 index.html 页面来代替任何 404 响应.通过传递启用此功能:
When using the HTML5 History API, the index.html page will likely have to be served in place of any 404 responses. Enable this by passing:
historyApiFallback: true
这实际上是一个非常重要的概念，您应该掌握它，因为这是任何单页面应用程序 (SPA) 的主要组件.另外我觉得你应该在有机会的时候深入研究你的 webpack 配置文件.
It's actually a pretty important concept and one you should grasp since this is a major component of any single page application (SPA). Also I feel you should take a deep dive into your webpack config file when you get the chance.
这是关于 historyApiFallback 选项的更好、更丰富的解释:
Here's a better, enriching explanation on the historyApiFallback option:
单页应用程序 (SPA) 通常只使用一个索引文件可以通过网络浏览器访问:通常是 index.html.导航然后通常使用 JavaScript 处理应用程序HTML5 历史 API 的帮助.这会导致用户出现问题点击刷新按钮或直接访问页面以外的页面登陆页面，例如/help 或/help/online 作为 Web 服务器绕过索引文件以在此位置定位文件.身为你的应用程序是 SPA，Web 服务器将无法尝试检索文件并向用户返回 404 - Not Found 消息.
Single Page Applications (SPA) typically only utilise one index file that is accessible by web browsers: usually index.html. Navigation in the application is then commonly handled using JavaScript with the help of the HTML5 History API. This results in issues when the user hits the refresh button or is directly accessing a page other than the landing page, e.g. /help or /help/online as the web server bypasses the index file to locate the file at this location. As your application is a SPA, the web server will fail trying to retrieve the file and return a 404 - Not Found message to the user.
两个很棒的资源:Webpack Dev Server 和
Two great resources: Webpack Dev Server and connect-history-api-fallback documentation.
这篇关于webpack 包在重新加载时失败?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
