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

【问题标题】：How to render webpack in react app?如何在反应应用程序中呈现 webpack？
【发布时间】：2018-02-01 01:39:58
【问题描述】：

我让我的 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' }

    ]
  },
};

如何让它呈现应用程序？

【问题讨论】：

您的index.html 文件在哪里？你是在上面导入你的bundle.js 吗？

标签： node.js reactjs webpack webpack-dev-server webpack-2

【解决方案1】：

在您的 index.html 文件中添加：

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

【讨论】：