新しいReactjsアプリケーションで404エラーが発生しました。main.jsファイルを探していますか？

このアプリは、（ここでは私が持っているもの/Users/ldco2016/Projects/reactquiz/src/components/App.jsxレンダリングする必要があります：新しいReactjsアプリケーションで404エラーが発生しました。main.jsファイルを探していますか？

import React, {Component} from 'react'; 
import ReactDOM from 'react-dom'; 

class App extends Component{ 
    render(){ 
     return(
      <div> 
       APP 
      </div> 
     ) 
    } 
} 

export default App

を代わりに、私は空白のページを取得するとChromeのDevツールのコンソールがあります私に言って、この：。

GET http://localhost:8080/app/js/main.js 404 (Not Found)

は、私が知っているその意味が、私は私がレンダリングするページまたはmain.jsファイルを検索しようとしているかどうかについては不明だ

/ユーザ/ ldco2016 /プロジェクト/ reactquiz/package.json：

{ 
    "name": "reactquiz", 
    "version": "1.0.0", 
    "description": "A Reactjs Quiz App", 
    "main": "index.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "author": "Daniel Cortes", 
    "license": "ISC", 
    "devDependencies": { 
    "babel-core": "6.13.*", 
    "babel-loader": "6.2.*", 
    "webpack": "1.13.*" 
    }, 
    "dependencies": { 
    "react": "^15.3.1", 
    "react-dom": "^15.3.1" 
    } 
}

/Users/ldco2016/Projects/reactquiz/app/index.html：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Reactjs Quiz</title> 
</head> 
<body> 
    <div id="app"></div> 

    <script src="js/main.js"></script> 
</body> 
</html>

ldco2016 @ DCortes-のMacBook-PRO-3〜/プロジェクト/ reactquiz/webpack.config.js：

module.export = { 
    entry: [ 
     './src/index.js' 
    ], 
    output: { 
     path: __dirname, 
     filename: 'app/js/main.js' 
    }, 
    module: { 
     loaders: [{ 
      test: /\.jsx?$/, 
      loader: 'babel', 
      exclude: /node_modules/ 
     }] 
    } 

}

/Users/ldco2016/Projects/reactquiz/src/index.js：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './components/App.jsx'; 

ReactDOM.render(
    <App />, 
    document.getElementById('app') 
);

出典

2016-08-22 Daniel

webpackを実行しましたか？ – martriay

あなたはトンを必要としますo webpackを実行してmain.jsファイルを生成する。 package.jsonにファイルを2つ変更します。"start": "webpack --progress -p --config webpack.config.js --watch"スクリプトを追加し、webpack.config.jsにローダーをbabel-loaderに変更します。

P.S. 2回目の変更は必要ありません。

package.json

{ 
    "name": "reactquiz", 
    "version": "1.0.0", 
    "description": "A Reactjs Quiz App", 
    "main": "index.js", 
    "scripts": { 
    "start": "webpack --progress -p --config webpack.config.js --watch" 
    }, 
    "author": "Daniel Cortes", 
    "license": "ISC", 
    "devDependencies": { 
    "babel-core": "6.13.*", 
    "babel-loader": "6.2.*", 
    "webpack": "1.13.*" 
    }, 
    "dependencies": { 
    "react": "^15.3.1", 
    "react-dom": "^15.3.1" 
    } 
}

webpack.config.js

module.export = { 
    entry: [ 
     './src/index.js' 
    ], 
    output: { 
     path: __dirname, 
     filename: 'app/js/main.js' 
    }, 
    module: { 
     loaders: [{ 
      test: /\.jsx?$/, 
      loader: 'babel-loader', 
      exclude: /node_modules/ 
     }] 
    } 

}

さて今、あなたのローカルホストを開き、上記のはず

npm run start

コマンドでWebPACKの実行作業。

出典

2016-08-22 05:32:31

Hey Shubham、私はProjectpacksフォルダにwebpackをグローバルにインストールしましたが、私がReactjsで作成したさまざまなプロジェクトでは動作しませんでしたか？ – Daniel

@ダニエルはい、すべてのプロジェクトで動作しますが、main.jsファイルを生成するためにプロジェクトごとに別々に実行する必要があります –

Shubhamありがとう、私はあなたの答えを正しいものとしてマークします。 – Daniel

新しいReactjsアプリケーションで404エラーが発生しました。main.jsファイルを探していますか？

答えて

関連する問題