我有这个工作,不记得我改变了什么,现在页面加载但没有反应呈现在屏幕上.不确定错误在哪里.运行webpack -m后跟npm start时没有错误发生
webapp文件夹就像这样......
这是重要的文件
的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或我的计算机的完整路径上显示任何内容.
谢谢你的帮助
我可以通过做三件事来运行你的示例。
HTMLWebpackConfiguration首先，在 的顶部添加webpack.config.js。然后，index.html在 中添加一个页面/app。最后，确保配置指向 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>
信息来源：
不变违规：_registerComponent(...)：目标容器不是 DOM 元素
http://javascriptplayground.com/blog/2016/07/webpack-html-plugin/
| 归档时间： |
|
| 查看次数： |
2872 次 |
| 最近记录： |