1. ev
  2. Soru-cevap
  3. yapılamıyor tepki-hot-yükleyici

yapılamıyor tepki-hot-yükleyici

2016-04-26 26 views
5

Ben webpack-dev-server ve react-router ile react-hot-loader kullanmaya çalışıyorum ama localhost'u erişmeye çalıştığınızda tepki-yönlendirici ve webpack-dev-sunucu çalışması: 3000/I get:yapılamıyor tepki-hot-yükleyici

Cannot GET /

Elbette, localhost'a erişmeye çalıştığımda çalışır: 8000 /. Başarı olmadan react-hot-boilerplate'u takip etmeye çalıştım.

server.js

const http = require('http'); 
const express = require('express'); 
const consolidate = require('consolidate'); 
const bodyParser = require('body-parser'); 
const routes = require('./routes'); 

const app = express(); 

app.set('views', 'public/pages'); // Set the folder-name from where you serve the html page. 
app.set('view engine', 'html'); 
app.engine('html', consolidate.handlebars); 
app.use(express.static('public')); // Set the folder from where you serve all static files 
app.use(express.static('public/dist')); // Set the folder from where you serve all static files 
app.use(bodyParser.urlencoded({ extended: true })); 

const portNumber = 8000; 

http.createServer(app).listen(portNumber,() => { 
    console.log(`Server listening at port ${portNumber}`); 
    routes.initialize(app); 
}); 

const webpack = require('webpack'); 
const WebpackDevServer = require('webpack-dev-server'); 
const config = require('./webpack.config'); 

new WebpackDevServer(webpack(config), { 
    colors: true, 
    historyApiFallback: true, 
    inline: true, 
    hot: true, 
}).listen(3000, 'localhost', (err) => { 
    if (err) { 
    console.log(err); 
    } 
});

routes.js (böylece tüm yolları yönlendirici işaret)

function initialize(app) { 
    const routes = [ 
    '/', 
    '/login', 
    ]; 

    routes.forEach((route) => { 
    app.get(route, (req, res) => { 
     res.render('main-content.html'); 
    }); 
    }); 
} 

exports.initialize = initialize;

webpack.config: Burada

kod bu .js 

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

const nodeDir = `${__dirname}/node_modules`; 

const config = { 
    resolve: { 
    alias: { 
     react: `${nodeDir}/react`, 
     'react-dom': `${nodeDir}/react-dom`, 
     'react-router': `${nodeDir}/react-router`, 
     'react-bootstrap': `${nodeDir}/react-bootstrap`, 
     velocity: `${nodeDir}/velocity-animate`, 
     moment: `${nodeDir}/moment`, 
     slimscroll: `${nodeDir}/slimscroll`, 
    }, 
    }, 
    entry: { 
    routes: [ 
     'webpack-dev-server/client?http://localhost:3000', 
     'webpack/hot/only-dev-server', 
     './public/src/routes/js/main', 
    ], 
    vendors: [ 
     'react', 'react-dom', 'react-router', 'react-bootstrap', 
     'velocity', 'moment', 'slimscroll', 
    ], 
    }, 
    output: { 
    path: path.join(__dirname, 'public/dist'), 
    publicPath: path.join(__dirname, 'public/dist'), 
    filename: 'bundles/[name].bundle.js', 
    chunkFilename: 'chunks/[name].chunk.js', 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     include: path.join(__dirname, 'public'), 
     loader: 'react-hot', 
     }, 
     { 
     test: /\.js$/, 
     include: path.resolve(__dirname, 'public'), 
     loader: 'babel', 
     }, 
     { 
     test: /\.css$/, 
     include: path.join(__dirname, 'public'), 
     loader: 'style!css-loader?modules&importLoaders=1' + 
     '&localIdentName=[name]__[local]___[hash:base64:5]', 
     }, 
    ], 
    }, 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.optimize.CommonsChunkPlugin('vendors', './bundles/vendors.js', Infinity), 
    ], 
}; 

module.exports = config;

komut

"scripts": { 
    "dev": "webpack --config webpack.config.js", 
    "hot": "webpack-dev-server --devtool eval --progress --colors --inline --hot", 
    "build": "webpack -p --config webpack.config.prod.js" 
    }

ana-content.html

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <title>Brigad Admin Panel</title> 
    <!-- Tell the browser to be responsive to screen width --> 
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> 
    <!-- Bootstrap --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <!-- Font Awesome --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css"> 
    <!-- Ionicons --> 
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> 
    <!-- Customs --> 
    <link rel="stylesheet" href="styles/global.css"> 
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,600,400italic,700,600italic,700italic,800,800italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'> 
    </head> 

    <body class="hold-transition"> 
    <div id="content"></div> 

    <!--<script src="dist/bundles/vendors.js"></script>--> 
    <!--<script src="dist/bundles/routes.bundle.js"></script>--> 

    <script src="http://localhost:8080/public/dist/bundles/vendors.js"></script> 
    <script src="http://localhost:8080/public/dist/bundles/routes.bundle.js"></script> 
    </body> 
</html>

giriş noktası

import React from 'react'; 
import { render } from 'react-dom'; 
import { Router, browserHistory } from 'react-router'; 

import RootRoute from './components/RootRoute'; 

render(
    <Router history={browserHistory} routes={RootRoute} />, 
    document.getElementById('content') 
);

Çalışmak için react-hot-loader'u nasıl yapabilirim?

Şimdiden teşekkürler.

kaynak

2016-04-26 Zephir77167

+0

bir göz atın? Giriş yolumu yüklemek için alabilirim ancak başka bir yol çalışmıyor. – Tom

+0

Merhaba, çok aptalca, benim regex "/" içeriyordu ve Windows – Zephir77167

+0

Şerefe'daydım. Ben sadece web için tüm webpack/babel/tepki/tepki-yönlendirici/sıcak-yeniden doldurma yığını çalışmaya çalışırken, çok fazla zaman harcayan, yönlendirmek için tepki-yönlendirici alamadım RHL vazgeçerek sona erdi! – Tom

cevap

İlgili konular

 İlgili konular