反应不在 Webpack 开发服务器上呈现
Posted
技术标签:
【中文标题】反应不在 Webpack 开发服务器上呈现【英文标题】：React not rendering on Webpack Dev server 【发布时间】：2017-04-20 13:24:10 【问题描述】：我有这个工作，不记得我改变了什么，现在页面加载但没有反应呈现到屏幕上。不确定错误在哪里。当我运行 webpack -m 后跟 npm start 时没有发生错误
webapp 文件夹是这样的...
应用 -- App.js 公共 -- 捆绑.js -- index.html webpack.config.js .babelrc package.json这里是重要文件
网络包
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 或我的计算机的完整路径上显示任何内容。
感谢您的帮助
【问题讨论】：
浏览器控制台没有错误？ nope 控制台中没有错误 :( 【参考方案1】：我可以通过做三件事来运行您的示例。
首先，在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',
filename: 'bundle.js',
,
plugins: [HTMLWebpackPluginConfig],
devServer:
inline:true,
contentBase: './public',
port: 3333
,
module:
loaders: [
test: /\.js$/,
exclude: /node_modules/,
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/
【讨论】：
是的，我实际上已经从该教程中制作了这个示例 - 非常有帮助。我希望找到一种方法让我的 localhost 在没有 html-webpack mod 的情况下运行。 我认为唯一可行的方法是如果你有一个 HTML 文件来“启动”你的包。但是，如果您找到任何其他解决方案，请发布 - 我也想知道！【参考方案2】：我遇到了同样的问题。您可能需要重新访问此解决方案。
在查看webpack-dev-server 文档后，我意识到我需要在 webpack 配置中指定 devServer 属性集合。你已经在你的例子中做到了这一点，这是在我回复之前 7 个月。他们文档中的示例：
devServer:
contentBase: path.join(__dirname, "dist"),
compress: true,
port: 9000
这解决了我什至没有加载 index.html 的情况（根据浏览器网络调试列表）。
我不需要在任何地方添加HTMLWebpackConfiguration。
https://webpack.js.org/configuration/dev-server/
【讨论】：
以上是关于反应不在 Webpack 开发服务器上呈现的主要内容，如果未能解决你的问题，请参考以下文章
如何使用反应路由器 dom v4 配置 webpack 开发服务器？
如何将我正在使用 webpack 构建的反应应用程序链接到 phpmyadmin 外部数据库并查询它而不在代码中显示我的数据库密码？