Javascript 与节点服务器一起使用时，未加载由webpack创建的bundle.js_Javascript_Node.js_Reactjs_Webpack

Javascript 与节点服务器一起使用时，未加载由webpack创建的bundle.js

javascript node.js reactjs webpack

Javascript 与节点服务器一起使用时，未加载由webpack创建的bundle.js,javascript,node.js,reactjs,webpack,Javascript,Node.js,Reactjs,Webpack,我是Reactjs和webpack的新手。我正在尝试使用Node和React做一个示例应用程序。我选择Webpack作为模块绑定器。这是我的项目结构 Project |--index.html |--package.json |--server.js |--webpack.config.js |--app/main.js |--app/routes.js |--app/components/login.js webpack.config.js modul

我是Reactjs和webpack的新手。我正在尝试使用Node和React做一个示例应用程序。我选择Webpack作为模块绑定器。这是我的项目结构

Project  
|--index.html  
|--package.json  
|--server.js  
|--webpack.config.js  
|--app/main.js    
|--app/routes.js    
|--app/components/login.js

webpack.config.js

module.exports = {
    entry: "./app/main.js",
    output: {
        sourceMapFilename: "build/bundle.js.map",
        filename: "build/bundle.js"
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    module: {
        loaders: [{
            test: /.jsx?$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            query: {
                presets: ['es2015', 'react']
            }
        }, {
            test: /\.css$/,
            loader: "style-loader!css-loader"
        }, {
            test: /\.png$/,
            loader: "url-loader?limit=100000"
        }]
    }
}

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>New Eden Faces</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900"/>
</head>
<body>
<div id="app">{{ html|safe }}</div>
<script type="text/javascript" src="build/bundle.js"></script>
</body>
</html>

Webpack在我的根目录下生成build/build.js（与server.js和index.html并行）
根据routes.js中配置的路由，运行节点服务器并尝试获取时，将呈现我的登录组件。
这是我的项目/app/components/login.js

import React from 'react';
import ReactDOM from 'react-dom';
import {Button} from 'react-bootstrap';
class Login extends React.Component {
    render() {
        return (
            <div className="container">
                <div className="row">
                    <div className="col-sm-5">
                        <strong>Username</strong>
                    </div>
                    <div className="col-sm-5 form-control">
                        <input type='text' className='form-control'/>
                    </div>
                    <Button bsSize="large">Hi</Button>
                </div>

            </div>
        )
    }
}

export default Login;

从“React”导入React；
从“react dom”导入react dom；
从“react bootstrap”导入{Button}；
类登录扩展了React.Component{
render（）{
返回(
用户名
你好
)
}
}
导出默认登录；

这是我的输出的图像快照

我可以看到它是在我的项目的build目录下生成的。为什么不加载任何css？即使我用了react bootstrap的按钮？为什么没有应用css类。Webpack应该捆绑依赖的css文件，对吗

这几天来一直困扰着我，但我什么也没找到。任何帮助都会非常好。我希望我说得很清楚，并提前表示感谢。

需要指示您的node.js应用程序为静态资产提供服务。（即

build

目录下的javascripts）。例如：

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

const staticAssetsPath = path.resolve(__dirname, 'build');
app.use(express.static(staticAssetsPath));

您是否告诉您的节点服务器anywhere使用构建目录作为静态资源位置？我已经这样做了。但还是不行，我不知道。我认为html可以拾取标记到它的脚本（就像普通html一样）。当我添加了上面的代码片段时，它仍然不适用于我：（您需要确保静态文件路径正确，才能使其正常工作。您是否实际运行了“webpack”来编译您的文件？是的。只有在我运行了“webpack”之后，才会在我的项目中生成build/build.js，我正试图将其作为静态资产加载到我的server.js中。如果您查看我的webpack.config.js，我已经指定了“sourceMapFilename”但是我没有看到在我的构建目录下生成映射文件。

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

const staticAssetsPath = path.resolve(__dirname, 'build');
app.use(express.static(staticAssetsPath));