节点的开发模式，Webpack-Dev-Server，React - 没有嵌套路由的此类文件或目录 [英] Dev Mode for Node, Webpack-Dev-Server, React - No Such File or Directory for Nested Routes
问题描述
我正在尝试使用Node和Webpack-Dev-Server让我的应用程序在开发模式下工作。当我提供'/'时，我完全恢复了我想要的东西。但是，当我'/ test'时，我得到'没有这样的文件或目录'。我在Webpack的网站和React Router Training上阅读了很多文档，似乎没有人真正回答这个问题。我希望能够使用browserHistory而不是hashHistory（我仍在使用React-Router v3）。
I am trying to get my application to work in development mode with Node and Webpack-Dev-Server. When I serve up '/' I get back exactly what I intend. However, when I do '/test' I get 'no such file or directory'. I have read a lot of documentation on Webpack's website and React Router Training, none seem to really answer this issue. I want to be able to use browserHistory instead of hashHistory (I am still using React-Router v3).
package.json：
package.json:
{
"name": "boilerplate",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"clean": "rimraf dist",
"build": "NODE_ENV=production npm run clean && webpack -p",
"dev": "nodemon server.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.15.3",
"babel-core": "^6.7.2",
"babel-loader": "^6.2.4",
"babel-plugin-transform-class-properties": "^6.22.0",
"babel-preset-env": "^1.1.8",
"babel-preset-react": "^6.5.0",
"css-loader": "^0.26.1",
"express": "^4.14.0",
"html-webpack-plugin": "^2.26.0",
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-redux": "^4.4.1",
"react-router": "^3.2.0",
"redux": "^3.3.1",
"redux-promise": "^0.5.3",
"rimraf": "^2.5.4",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^3.8.1"
},
"devDependencies": {
"nodemon": "^1.11.0",
"webpack-dev-middleware": "^1.9.0",
"webpack-dev-server": "^2.2.0-rc.0",
"webpack-hot-middleware": "^2.20.0"
}
}
webpack.config.js
webpack.config.js
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VENDOR_LIBS = [
'axios', 'react', 'redux', 'react-dom', 'react-redux',
'react-router', 'redux-promise'
];
module.exports = {
entry: {
bundle: './client/src/index.js',
vendor: VENDOR_LIBS
},
output: {
chunkFilename: '[name].[chunkhash].js',
path: path.join(__dirname, 'dist'),
publicPath: '/'
},
module: {
rules: [
{
use: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
},
{
use: ['style-loader', 'css-loader'],
test: /\.css$/
},
{
test: /\.(jpe?g|png|gif|svg|)$/,
use: [
{
loader: 'url-loader',
options: {limit: 40000}
},
'image-webpack-loader'
]
}
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor', 'manifest']
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}),
new HtmlWebpackPlugin({
template: './client/src/index.html'
})
],
devtool: 'inline-source-map',
devServer: {
contentBase: '/dist',
historyApiFallback: true
},
};
server.js：
server.js:
const express = require('express');
const path = require('path');
const app = express();
if (process.env.NODE_ENV !== 'production') {
app.use(express.static(path.join(__dirname, 'dist')));
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const config = require('./webpack.config.js');
const compiler = webpack(config);
app.use(webpackDevMiddleware(compiler, {
publicPath: config.output.publicPath
}));
} else {
app.use(express.static('dist'));
}
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});
app.listen(process.env.PORT || 3050, () => console.log('Listening'));
routes.js：
routes.js:
import React from 'react';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import App from './components/app';
import Home from './components/home';
const componentRoutes = (
<Route component={App} path='/'>
<Route component={Home} path='/test' />
</Route>
);
const Routes = () => {
return <Router history={ browserHistory } routes={ componentRoutes } />
};
export default Routes;
App组件呈现一个div表示它已加载且与Home组件相同。如果你想在Github上看到整个东西，这里有一个链接：
The App component renders a single div saying it loaded and same for the Home component. If you care to see the entire thing on Github, here is a link:
https://github.com/jlag34/nodeWebpackSupport
主要目标是能够在开发中加载'/ test'不使用hashHistory的模式。
The main goal is to be able to load '/test' in dev mode without using hashHistory.
Wepback docs： https://webpack.js.org/guides/development/
Wepback docs: https://webpack.js.org/guides/development/
推荐答案
您正在服务 dist / index.html 当没有其他路线匹配时，使用：
You are serving dist/index.html when no other route was matched, with:
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});
但这会在您的文件系统中查找该文件，该文件应该适用于您的生产版本（当您构建捆绑，然后提供服务）。如果你看一下你去 / test 时得到的错误，你会发现这个文件不存在。
But this looks for that file on your file system, which should work in your production build (when you build the bundle and then serve it). If you look at the error you get when going to /test you will see that this file doesn't exist.
Error: ENOENT: no such file or directory, stat '/path/to/nodeWebpackSupport/dist/index.html'
这种情况会发生，因为您使用 html-webpack生成和 index.html -plugin webpack-dev-middleware 将其保留在内存中，不会将其写入文件系统。在开发中，您无法提供该文件，而是需要从内存中提供该文件。您可以使用 compiler.outputFileSystem.readFile 访问webpack内存中的文件。
This happens, because you're generating the index.html with html-webpack-plugin and webpack-dev-middleware keeps that in memory and doesn't write it to the file system. In development you cannot serve that file, but instead you need to serve the one from memory. You can access the files in webpack's memory with compiler.outputFileSystem.readFile.
在您的开发路线中，您需要添加以下内容（最初取自
In your development routes you need to add the following (originally taken from the comment of html-webpack-plugin #145):
app.use('*', (req, res, next) => {
const filename = path.resolve(compiler.outputPath, 'index.html');
compiler.outputFileSystem.readFile(filename, (err, result) => {
if (err) {
return next(err);
}
res.set('content-type','text/html');
res.send(result);
res.end();
});
});
这篇关于节点的开发模式，Webpack-Dev-Server，React - 没有嵌套路由的此类文件或目录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
