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. 我的 cmd 显示它在 localhost:3333 上运行，并且 bundle 现在有效。请帮忙，因为这是我最后一次尝试 react-redux，请帮忙。

索引.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>

应用程序.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

1

最后我发现了错误，它在html中。而不是<script type="index.js"></script>我要写<script src="index.js"></script>。

于 2016-03-18T12:32:48.997 回答
0

您的webpack.config.js输出文件名应该是bundle.js，这应该与您的 index.html 相同

并且index.html应该更正为<script src="bundle.js"></script>

于 2016-03-18T11:31:46.597 回答