Question

我是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>

在我的server.js中，我添加了一个中间件

app.use(function(req, res) {
    Router.match({ routes: routes.default, location: req.url }, function(err, redirectLocation, renderProps) {
        if (err) {
            res.status(500).send(err.message)
        } else if (redirectLocation) {
            res.status(302).redirect(redirectLocation.pathname + redirectLocation.search)
        } else if (renderProps) {
            var html = ReactDOM.renderToString(React.createElement(Router.RoutingContext, renderProps));
            var page = swig.renderFile("./index.html", {html:html});
            res.status(200).send(page);
        } else {
            res.status(404).send('Page Not Found')
        }
    });
});

Webpack在我的根目录下生成build / build.js（与server.js和index.html并行）当我运行我的节点服务器并尝试获取http://localhost:3007/login时，根据在routes.js中配置的路由，我的Login组件将被呈现。
这是我的项目/ 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;

这是我的输出的图像快照。

It is not loading my bundle.js why?

我可以看到它是在我的项目生成目录下生成的。为什么不加载任何CSS？尽管我使用了来自react-bootstrap的Button？为什么css类没有得到应用。 Webpack应该捆绑依赖的css文件吧？

从几天开始就被困在这上面但没有找到任何东西。任何帮助都会非常棒。我希望我能提前清楚并感谢你。

Answer 1

需要指示您的node.js应用程序提供静态资产。（即build目录下的javascripts）。例如：

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

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

当与节点服务器

1 个答案: