reactjs – React不在Webpack Dev服务器上呈现

发布时间：2020-12-15 05:06:30 所属栏目：百科来源：网络整理

导读：我有这个工作,不记得我改变了什么,现在页面加载但没有反应呈现在屏幕上.不确定错误在哪里.运行webpack -m后跟npm start时没有错误发生 webapp文件夹就像这样…… {app} – App.js {public} – bundle.js – index.html webpack.config.js .babelrc package.j

我有这个工作,不记得我改变了什么,现在页面加载但没有反应呈现在屏幕上.不确定错误在哪里.运行webpack -m后跟npm start时没有错误发生

webapp文件夹就像这样……

> {app}
– App.js
> {public}
– bundle.js
– index.html
> webpack.config.js
> .babelrc
> package.json

这是重要的文件

的WebPack

module.exports = {
  entry: './app/App.js',output: {
    path: './public',filename: 'bundle.js',},devServer: {
      inline:true,contentBase: './public',port: 3333
    },module: {
    loaders: [
      {
        test: /.js$/,exclude: /node_modules/,loader: 'babel'
      }
    ]
  }
}

的package.json

{
  "name": "newaccount","version": "1.0.0","description": "a form submission for new accounts","main": "App.js","scripts": {
    "start": "webpack-dev-server"
  },"author": "---","license": "ISC","dependencies": {
    "react": "^15.4.1","react-dom": "^15.4.1","react-router": "^3.0.0"
  },"devDependencies": {
    "babel-core": "^6.18.2","babel-loader": "^6.2.8","babel-preset-es2015": "^6.18.0","babel-preset-react": "^6.16.0","html-webpack-plugin": "^2.24.1","webpack": "^1.13.3","webpack-dev-server": "^1.16.2"
  }
}

.babelrc

{
  "presets": [
          "es2015","react"
    ]
}

App.js

import React,{ Component } from 'react';
import ReactDOM from 'react-dom';



class Testing extends Component {
    render() {
        return (
            <div>
                <h3>JUST A TEST</h3>
            </div>
        )
    }
}

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

我曾尝试使组件测试成为ES6 const …

const Testing = () => return <div><h3>JUST A TEST</h3></div>

仍然无法在localhost：3333或我的计算机的完整路径上显示任何内容.

谢谢你的帮助

通过做三件事,我能够让你的榜样得以运行.

首先,在webpack.config.js的顶部添加一个HTMLWebpackConfiguration.然后,在/ app中添加index.html页面.最后,确保配置指向HTML文件.最后的webpack.config.js看起来像这样：

var HtmlWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',filename: 'index.html',inject: 'body'
});

module.exports = {
  entry: __dirname + '/app/App.js',output: {
    path: __dirname + '/public',plugins: [HTMLWebpackPluginConfig],loader: 'babel'
      }
    ]
  }
}

app / index.html如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My App</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="app"></div>
</html>

信息来源：

https://tylermcginnis.com/react-js-tutorial-1-5-utilizing-webpack-and-babel-to-build-a-react-js-app-5f804d729d3b#.f4sslv7ub

Invariant Violation: _registerComponent(…): Target container is not a DOM element

http://javascriptplayground.com/blog/2016/07/webpack-html-plugin/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!