Node.js /在react with webpack应用程序中找不到src/bundle.js_Node.js_Reactjs_Webpack

Node.js /在react with webpack应用程序中找不到src/bundle.js

node.js reactjs webpack

Node.js /在react with webpack应用程序中找不到src/bundle.js,node.js,reactjs,webpack,Node.js,Reactjs,Webpack,下面是我的server.js文件： import path from 'path'; import express from 'express'; import webpack from 'webpack'; import middleware from './src/middleware'; const app = express(); var port = process.env.PORT || 8080; if(process.env.NODE_ENV === 'develop

下面是我的server.js文件：

import path from 'path';
import express from 'express';
import webpack from 'webpack';
import middleware from './src/middleware';

const app = express();
var port     = process.env.PORT || 8080;

if(process.env.NODE_ENV === 'development') {
const config = require('./webpack.config.dev');
const compiler = webpack(config);
app.use(require('webpack-dev-middleware')(compiler, {
    noInfo: true,
    publicPath: config.output.publicPath,
    stats: {
        assets: false,
        colors: true,
        version: false,
        hash: false,
        timings: false,
        chunks: false,
        chunkModules: false
    }
}));
//app.use(require('webpack-hot-middleware')(compiler));
app.use(express.static(path.resolve(__dirname, 'src')));
} else if(process.env.NODE_ENV === 'production') {
app.use(express.static(path.resolve(__dirname, 'dist')));
}

app.get('*', middleware);

app.listen(port, '0.0.0.0', (err) => {
if(err) {
    console.error(err);
} else {
    console.info(path.resolve(__dirname, 'src'));
    console.info('Listening at '+port);
}
});

My webpack.config.dev.js：

const path = require('path');
const webpack = require('webpack');

module.exports = {
entry: './src/middleware.js',
output: {
path       : path.resolve('./src'), // always use absolute paths
filename   : 'bundle.js',
publicPath : '/assets/'
},
plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: JSON.stringify('development')
        }
    })
],
module: {
    loaders: [
        {
            test: /\.css$/,
            loader: 'style-loader'
        }, {
            test: /\.css$/,
            loader: 'css-loader',
            include: path.join(__dirname, 'node_modules'),
            query: {
                modules: true,
                localIdentName: '[name]__[local]___[hash:base64:5]'
            }
        },
        {
            test: /\.js$/,
            loader: 'babel',
            include: path.resolve(__dirname, 'src'),
            query: {
                presets: [ 'react-hmre' ]
            }
        },
        { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
    ]
  }
};

这是我的中间件：

import React from 'react';
import { renderToString } from 'react-dom/server';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import { match, RouterContext } from 'react-router';
import reducers from './reducers';
import routes from './routes';

export default (req, res) => {
match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
    if(error) {
        res.status(500).send(error.message);
    } else if(redirectLocation) {
        res.redirect(302, redirectLocation.pathname + redirectLocation.search);
    } else if(renderProps) {
        res.status(200).send(`
            <!DOCTYPE html>
            <html>
            <head>
            <title>Req Management</title>
            <link rel="stylesheet" href="https://unpkg.com/react-select/dist/react-select.css">
            </head>
            <body>
            <script src='/src/bundle.js'></script>
            <div id='app'>${renderToString(
                <Provider store={createStore(reducers)}>
                <RouterContext {...renderProps} />
                </Provider>
            )}</div>
            </body>
            </html>
            `);
        } else {
            console.log("inside else");
            res.status(404).send('Not found');
        }
    });
};

这是我的index.js：

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { Router, browserHistory } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';
import reducers from './reducers';
import routes from './routes';
import { applyMiddleware, createStore } from "redux"
import logger from "redux-logger"
import thunk from "redux-thunk"

const middleware = applyMiddleware(thunk, logger());

const store = createStore(reducers, middleware);
const history = syncHistoryWithStore(browserHistory, store);

render(
<Provider store={store}>
    <Router history={history} store={store}>
        { routes }
    </Router>
</Provider>,
document.getElementById('app')
);

if(process.env.NODE_ENV == 'development' && module.hot) {
module.hot.accept('./reducers', () => {
    store.replaceReducer(require('./reducers').default);
});
}

从“React”导入React；
从'react dom'导入{render}；
从'react redux'导入{Provider}；
从“react Router”导入{Router，browserHistory}；
从“react router redux”导入{syncHistoryWithStore}；
从“./reducers”导入减速机；
从“./routes”导入路由；
从“redux”导入{applyMiddleware，createStore}
从“redux记录器”导入记录器
从“redux thunk”导入thunk
const middleware=applyMiddleware（thunk，logger（））；
const store=createStore（还原器、中间件）；
const history=syncHistoryWithStore（浏览器历史记录，存储）；
渲染(
{routes}
,
document.getElementById（'app'）
);
if（process.env.NODE_env==“development”和&module.hot）{
模块.hot.accept（'./减速机'，（）=>{
store.replaceReducer（require（'./reducers'）。默认值）；
});
}

我正试图将此代码部署到Heroku。在webpack.config.dev.js文件中做了一些更改。无法恢复。在代码在本地正常工作之前。现在也不在本地工作

关于为什么您的代码不能在本地工作。这可能是因为你的拼写错误。您正在检查：

if(process.env.NODE_ENV === 'develospment') {

你大概是指“发展”…

这可能是由以下原因造成的：

app.use(express.static(path.resolve(__dirname, 'src')));

这使得

src/

成为静态资源的根；换句话说，

/SOME.FILE

被查找为

src/SOME.FILE

。将其扩展到您的url

/src/bundle.js

，它将被查找为

src/src/bundle.js

，这显然是不正确的

有几种解决方案：

在HTML中使用
```
/bundle.js
```
而不是
```
/src/bundle.js
```

在静态中间件的路径前面加上

/src

：

app.use('/src', express.static(path.resolve(__dirname, 'src')));

我认为后者更好。

解决了打字错误。bundle.js仍获得404。请帮忙。你能提供上面代码中使用的目录结构和食物的截图吗？我已经附上了文件夹结构图。我不明白你说的食物是什么意思。你能详细说明一下吗？我之前已经从你的问题中删除了请求，作为一名编辑，我希望问题贡献者阅读并理解发送给他们的通知小部件的编辑消息。由于这个问题包含紧急乞讨，我投了反对票。请不要添加，记住这里的大多数人都是志愿者。谢谢大家!@阿披舍克：对不起，那是个打字错误。不是这样的food@halfer.. 我为此道歉。。谢谢你的提醒。。将确保它不会再次发生。。。谢谢

app.use('/src', express.static(path.resolve(__dirname, 'src')));