2016-03-31 9 views
0

Tepki öğrenmeyi deniyorum ve istemci tarafı yönlendirmeyi denerken bazı sorunlara geliyorum.tepki istemci tarafında oluşturma hatası alınamıyor/

: Eğer benim dosyalarında ben tarayıcı sayfasında almaya devam listed.The hata var hata

/

GET olamaz benim Konsolda görebileceğiniz hata olduğunu görürseniz lütfen bize bildirin live.bundle.js: 14 GET http://localhost:8080/ 404 (Bulunamadı)

İşte

benim dosyalar şunlardır:

webpack.config.js

var webpack = require('webpack'); 
module.exports = { 
    entry: [ 
    'webpack/hot/only-dev-server', 
    './js/app.js' 
    ], 
output: { 
    path: __dirname + '/build', 
    filename: "bundle.js" 
    }, 
    module: { 
    loaders: [ 
     { test: /\.js?$/, loaders: ['react-hot', 'babel', 'babel-loader'], exclude: /node_modules/ }, 
     // { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }, 
     { test: /\.css$/, loader: "style!css" } 
    ] 
    }, 
    devServer: { 
    contentBase: "./src/www", 
    noInfo: true, 
    hot: true, 
    inline: true 
    }, 
    plugins: [ 
    new webpack.NoErrorsPlugin() 
    ] 
}; 

.babelrc

{ 
    "presets": ["es2015", "react"] 
} 

index.html

<!doctype html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>New React App</title> 
    </head> 
    <body> 
    <section id="react"></section> 
    <script src="/build/bundle.js"></script> 
    </body> 
</html> 

/js/app.js

import React from 'react'; 
import Router from 'react-router'; 
import {DefaultRoute, Link, Route, RouteHandler} from 'react-router'; 

import LoginHandler from './components/Login.js'; 

class App extends React.Component{ 
    render() { 
    return(
     <div className="nav"> 

     <Link to="app">Home</Link> 
     <Link to="login">Login</Link> 

     {/* Important Part */} 
     <RouteHandler/> 

     </div> 
    ); 
    } 
} 

let routes = (
    <Route name="app" path="/" handler={App}> 
    <Route name="login" path="/login" handler={LoginHandler}/> 
    </Route> 
); 

ReactDOM.run(routes, function (Handler) { 
    React.render(<Handler/>, document.body); 
}); 

/js/components/Login.js

import React from 'react'; 
class Login extends React.Component{ 
    render() { 
    return(
     <div>Welcome to login</div> 
    ); 
    } 
} 

export default Login; 

Yardımı takdir ediyorum.

İşte

var webpack = require('webpack'); 
module.exports = { 
    entry: [ 
    'webpack/hot/only-dev-server', 
    './js/app.js', 
    'webpack-dev-server/client?localhost:8080' 
    ], 
    output: { 
    path: __dirname + '/build', 
    filename: "bundle.js" 
    }, 
    module: { 
    loaders: [ 
     { test: /\.js?$/, loaders: ['react-hot', 'babel', 'babel-loader'], exclude: /node_modules/ }, 
     // { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }, 
     { test: /\.css$/, loader: "style!css" } 
    ] 
    }, 
    devServer: { 
    // contentBase: "./src/www", 
    noInfo: true, 
    hot: true, 
    inline: true 
    }, 
    plugins: [ 
    new webpack.NoErrorsPlugin(), 
    new webpack.HotModuleReplacementPlugin() 
    ] 
}; 
+0

Uygulamanızın 'bundle.js' çıktı dosyasını oluşturup oluşturmadığını kontrol ettiniz mi? Öyleyse o zaman sebebi budur. Bu sadece belirli bir dosyayı bulamıyor ve kodunuzdaki problem olan 'index.html' dosyasında içe aktardığınız için. Bu yüzden, 'bundle.js' dosyasının oluşturulduğundan emin olun. –

+0

Merhaba Amir, benim app build adlı bir klasör içinde bundle.js dosyası yaratıyor. –

cevap

0

sizin devserver yapılandırmasındaki

contentBase: "./src/www", 

kaldırmak @Frederick Mfinanga göre güncellenen benim webpack.config.js dosyasıdır. Bu, varsayılan olarak geçerli dizininizdeki dosyaları sunar. Hangi şeyleri aradığınızı ve index.html adresinizin nerede bulunduğuna inanıyorum? doğru?

+0

Merhaba Frederick, Bu bölümü ekledim çünkü eğer çıkarırsam "Hatalı Hata: [HMR] Sıcak Modül Değişimi devre dışı" hatasını alırım. Hala bunu yaptığımı mı düşünüyorsun? Varsa, az önce listelediğim hatayı nasıl çözebilirim? Ayrıca, index.html dosyama hizmet vermek istiyorum ve index.html sayfamın bulunduğu yerdir. –

+0

evet hala yapıp bu satırı giriş dizinize ekleyin. 'webpack-dev-server/client? Http: // localhost: 8080', bağlantı noktasını olarak değiştirin ve bunu eklenti dizinize ekleyin yeni Webpack.HotModuleReplacementPlugin() –

+0

Önerinizi takip ettim. Tarayıcımda koyduğum url "localhost: 8080/webpack-dev-server/#";. Hala "Hatalı Hata: [HMR} Sıcak Modül Değiştirme devre dışı" hatası alıyorum, webpack.config.js dosyasında değişikliklerinizi göstermek için sorumu güncelledim. Talimatları yanlış anladıysam lütfen bize bildirin. –