1

これは React-Redux の Hello World アプリケーションです。コマンド プロンプトで実行してもエラーは表示されませんがnpm start、localhost:3333 で開くと、空白のページが表示されます。をインストールしreact react-dom babel babel-core babel-preset-es2015 babel-preset-react babel-loader webpack webpcak-dev-serverました。私のコマンドは、localhost:3333 で実行されていることを示しており、バンドルは現在有効です。これがreact-reduxの最後の試みですので、助けてください。助けてください。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Setup</title>
</head>
<body>
  <div id="app"></div>
  <script type="index.js"></script>
</body>
</html>

App.js

import React from 'react';
class App extends React.Component {
    render() {
        return <div>Hello</div>
    }
}

export default App

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('app'))

パッケージ.json

{
  "name": "redux1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel": "^6.5.2",
    "react": "^0.14.7",
    "react-dom": "^0.14.7",
    "webpack": "^1.12.14",
    "webpack-dev-server": "^1.14.1"
  }
}

webpack.config.js

module.exports = {
    entry: './main.js',
    output: {
        path: './',
        filename: 'index.js'
    },
    devServer: {
        inline: true,
        port: 3333
    },
    module: {
        loaders: [
          {
            test:/\.js$/,
            exclude: /node_modules/,
            loader: 'babel',
            query: {
                presets: ['es2015','react']
            }
          }
        ]
    }
}

ブラウザのタブにタイトルSetupが表示されます。つまり、html コードのタイトルがブラウザに正常に表示されます。

4

2 に答える 2

0

webpack.config.js出力ファイル名は、 index.htmlbundle.jsと同じにする必要があります。

そして、index.htmlに修正する必要があります<script src="bundle.js"></script>

于 2016-03-18T11:31:46.597 に答える