BabelとWebpackを使用してブラウザにReactJSリソースを読み込めません。

基本的なプログラムを実行してReactJSを学習しようとしています。BabelとWebpackを使用してブラウザにReactJSリソースを読み込めません。

webpack.config.js

var config = { 
    entry: './main.js', 

    output: { 
     path: './', 
     filename: 'index.js' 
    }, 

    devServer: { 
     inline: true, 
     port: 8080 
    }, 

    module: { 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       exclude: /node_modules/, 
       loader: 'babel-loader', 

       query: { 
        presets: ['es2015', 'react'] 
       } 
      } 
      ] 
    } 
} 

module.experts = config;

package.json

{ 
    "name": "reactapp", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "start": "webpack-dev-server --hot" 
    }, 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "babel-core": "^6.11.4", 
    "babel-loader": "^6.2.4", 
    "babel-preset-es2015": "^6.9.0", 
    "babel-preset-react": "^6.11.1", 
    "react": "^15.2.1", 
    "react-dom": "^15.2.1", 
    "webpack": "^1.13.1", 
    "webpack-dev-server": "^1.14.1" 
    } 
}

App.jsx

import React from 'react'; 

class App extends React.Component { 
    render() { 
    return (
    <div> 
     "Hello, world." 
    </div> 
    ); 
    } 
} 

export default App;

main.js

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

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

サーバを起動するには210

index.htmlを

<!DOCTYPE html> 
<html lang = "en"> 
<head> 
    <meta charset="utf-8"> 
    <title>React App</title> 
</head> 
<body> 
    <div id = "app"></div> 
    <script type="text/javascript" src = "index.js"></script> 
</body> 
</html>

、ノー内容で、空のページを参照してください。 HTMLページはありますが、ReactによってDOMに追加される部分は見えません。

index.jsはバンドルされたアプリケーションを含むファイルに設定されていますが、ブラウザのコンソールに「Faile to load resource index.js（404）」というエラーが表示されます。 HTMLのscriptタグのsrc属性をmain.jsに変更すると、import文でSyntaxErrorが取得されます。

Babelやその他の依存関係をパッケージに正しくリンクしていないと問題が疑われます。タイプミスがある

出典

2016-07-27 Vishal Khanna

webpack.config.jsの内部では、代わりにあなたがwebpack.config.jsから設定をエクスポートしていない、とwebpackカスタムの設定を認識していないこの場合experts

module.exports = config; 
     ^

のexportsでなければならず、デフォルトの設定を使用します。

出典

2016-07-27 08:43:03

私はwebpack.config.jsが

devtool: 'eval', 
entry: './src/index', 
output: { 
    path: path.join(__dirname, 'dist'), 
    filename: 'bundle.js', 
    publicPath: '/static/', 
}, 
module: { 
    loaders: [{ 
    test: /\.js$/, 
    loaders: ['babel'], 
    exclude: /node_modules/, 
    include: __dirname, 
    }], 
}

と<script>

<script type="text/javascript" src = "/static/bundle.js"></script>

ようになると思います

出典

2016-07-27 09:16:22

BabelとWebpackを使用してブラウザにReactJSリソースを読み込めません。

答えて

関連する問題