我有这个工作,不记得我改变了什么,现在页面加载但没有反应呈现在屏幕上 . 不确定错误在哪里 . 运行webpack -m后跟npm start时没有错误发生
webapp文件夹就像这样......
-
- App.js
-
- 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或我的计算机的完整路径上显示任何内容 .
谢谢你的帮助
2 回答
通过做三件事,我能够让你的榜样得以运行 .
首先,在
webpack.config.js
的顶部添加HTMLWebpackConfiguration
. 然后,在/app
中添加index.html
页面 . 最后,确保配置指向HTML文件 . 最终webpack.config.js
看起来像这样:app/index.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/
我遇到了同样的问题 . 您可能想要重新访问此解决方案 .
检查
webpack-dev-server
文档后,我意识到我需要在webpack config中指定devServer属性集合 . 您已经在我的回复前7个月的示例中完成了此操作 . 他们的文档示例:这解决了我的情况,即index.html甚至没有加载(根据浏览器网络调试列表) .
我不需要在任何地方添加
HTMLWebpackConfiguration
.https://webpack.js.org/configuration/dev-server/