如何在反应应用程序中呈现webpack？

Question

我得到了我的webpack捆绑并生成了一个bundle.js文件，但是当我在它上面运行dev并转到localhost：8080它会把我带到这个屏幕

这似乎是一些文件的捆绑。

这是我的package.json。我是否需要对此页面中的脚本进行任何修改，或者一切看起来都不错？

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "main": "index.js",
  "dependencies": {
    "babel": "^6.23.0",
    "css-loader": "^0.28.5",
    "file-loader": "^0.11.2",
    "gh-pages": "^1.0.0",
    "html-webpack-plugin": "^2.30.1",
    "path": "^0.12.7",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-scripts": "1.0.11",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.9",
    "web-dev-server": "^1.1.1",
    "webpack": "^3.5.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "webpack",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "deploy": "npm run build&&gh-pages -d build",
    "dev": "webpack-dev-server"
  },
  "homepage": "https://jdiperi88.github.io",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1"
  }
}

这是我的webpack.config

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  output: { path: __dirname, filename: 'bundle.js' },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      },
      { 
        test: /\.css$/, 
        loader: "style-loader!css-loader" 
      },
      { 
        test: /\.png$/, 
        loader: "url-loader?limit=100000" 
      },
      { 
        test: /\.(pdf|jpg)$/, 
        loader: "file-loader" 
      },
      { test: /\.(png|woff|woff2|eot|ttf|svg)$/, 
        loader: 'url-loader?limit=100000' }

    ]
  },
};

如何让它渲染应用程序？

Answer 1

在index.html文件中添加：

<script src="/bundle.js"></script>