bundle.js, созданный webpack, не загружается при использовании с сервером узлов

Я новичок в Reactjs и webpack. Я пытаюсь сделать пример приложения с помощью Node и React. Я выбрал Webpack в качестве модуля. Это мой проект structuebundle.js, созданный 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 g enerates build/build.js в моем корневом каталоге (параллельно с server.js и index.html)
Когда я запускаю свой узел и пытаюсь получить http://localhost:3007/login, исходя из маршрутов, настроенных в routes.js, мой компонент входа получает визуализацию ,
Вот мой проект/приложение/компоненты/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? Хотя я использовал Button из реакционного бутстрапа? почему классы css не применяются. Предполагается, что пакет Webpack связан с зависимыми файлами css?

Застрял в этом от нескольких дней, но ничего не нашел. Любая помощь будет действительно велика. Надеюсь, я ясно и благодарю заранее.

источник

2016-10-26 Kvk

Вы сообщаете серверу узлов в любом месте, чтобы использовать каталог сборки как место статического ресурса? –

Я сделал это. все равно он не работает. – Kvk

Приложение node.js должно быть проинструктировано обслуживать статические активы. (т. е. javascripts в каталоге build). Например:

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

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

источник

2016-10-26 21:56:53

Я этого не знаю. Я думал, что html может записывать скрипты с тегами (как это делает обычный html). Это все еще не работает для меня, когда я добавил вышеприведенный фрагмент кода. :( – Kvk

Вам нужно убедиться, что путь к статическому файлу верен, чтобы заставить его работать. –

Действительно ли вы запускаете «webpack» для компиляции ваших файлов? –

bundle.js, созданный webpack, не загружается при использовании с сервером узлов

ответ

Смежные вопросы