【发布时间】：2018-01-10 14:59:54
【问题描述】：
我是新手，缺少一些东西。当我执行 npm start 并且在浏览器中打开时只显示页面标题时，我没有收到任何错误，反应不会呈现 hello world 消息。怎么了？？？？我在这方面花了太多时间。开发工具中没有错误，react 开发人员工具不会将该页面检测为 react 页面。不知道为什么？
我的 HTML：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>What's the weather dear?</title>
<link rel="stylesheet" type="text/css" href="/style.css">
<script src="index.js"></script>
</head>
<body>
<div id="checkabc"></div>
</body>
</html>
index.jsx 是
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('checkabc')
);
webpack.config.js
const webpack = require('webpack');
const TransferWebpackPlugin = require('transfer-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.jsx',
resolve: {
extensions: ['.js', '.jsx'],
},
devtool: 'eval',
output: {
filename: 'index.js',
publicPath: '/',
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
options: { presets: ['react', 'es2016'] },
}],
},
],
},
plugins: [
new HtmlWebpackPlugin({ template: 'src/public/index.html' }),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new TransferWebpackPlugin([
{ from: 'src/public' },
], '.'),
new webpack.DefinePlugin({
'process.env': {
ENDPOINT: JSON.stringify(process.env.ENDPOINT || 'http://0.0.0.0:9000/api'),
},
}),
],
};
编辑：现在我在 webpack.config.js 的输出中有 index.js 并添加到 html 中。但是现在我在控制台中收到以下错误：
webpack:///./~/fbjs/lib/invariant.js?:51 Uncaught Error: _registerComponent(...): Target container is not a DOM element.
at invariant (webpack:///./~/fbjs/lib/invariant.js?:44:15)
at Object._renderNewRootComponent (webpack:///./~/react-dom/lib/ReactMount.js?:310:126)
at Object._renderSubtreeIntoContainer (webpack:///./~/react-dom/lib/ReactMount.js?:401:32)
at Object.render (webpack:///./~/react-dom/lib/ReactMount.js?:422:23)
at eval (webpack:///./src/index.jsx?:10:51)
at Object.<anonymous> (http://localhost:8080/index.js:1513:1)
at __webpack_require__ (http://localhost:8080/index.js:660:30)
at fn (http://localhost:8080/index.js:86:20)
at eval (webpack:///multi_(webpack)-dev-server/client?:2:18)
at Object.<anonymous> (http://localhost:8080/index.js:2569:1)
npm start 给出以下输出：
@DESKTOP-UEH2PDD ~/projects/weatherapp/frontend
$ npm start
> weatherapp-frontend@0.0.1 start C:\cygwin64\home\dverma\projects\weatherapp\frontend
> webpack-dev-server --config webpack.config.js --progress --inline --colors
10% building modules 1/1 modules 0 active
Project is running at http://localhost:8080/
webpack output is served from /
Hash: 8cf92ee37f2a5067b1c4
Version: webpack 2.7.0
Time: 1859ms
Asset Size Chunks Chunk Names
\img\09.svg 1.39 kB [emitted]
index.js 1.19 MB 0 [emitted] [big] main
\favicon.ico 15.1 kB [emitted]
\index.html 353 bytes [emitted]
\style.css 190 bytes [emitted]
\img\01.svg 1.32 kB [emitted]
\img\02.svg 1.79 kB [emitted]
index.html 409 bytes [emitted]
\img\03.svg 801 bytes [emitted]
\img\04.svg 801 bytes [emitted]
\img\11.svg 1.82 kB [emitted]
\img\10.svg 1.39 kB [emitted]
\img\13.svg 1.74 kB [emitted]
\img\50.svg 471 bytes [emitted]
chunk {0} index.js (main) 1.03 MB [entry] [rendered]
[115] ./src/index.jsx 176 bytes {0} [built]
[116] (webpack)-dev-server/client?http://localhost:8080 5.83 kB {0} [built]
[136] ./~/html-entities/index.js 231 bytes {0} [built]
[139] ./~/loglevel/lib/loglevel.js 6.74 kB {0} [built]
[143] ./~/punycode/punycode.js 14.7 kB {0} [built]
[147] ./~/react-dom/index.js 59 bytes {0} [built]
[231] ./~/react/react.js 56 bytes {0} [built]
[259] ./~/strip-ansi/index.js 161 bytes {0} [built]
[261] ./~/url/url.js 23.3 kB {0} [built]
[262] ./~/url/util.js 314 bytes {0} [built]
[263] (webpack)-dev-server/client/overlay.js 3.6 kB {0} [built]
[264] (webpack)-dev-server/client/socket.js 856 bytes {0} [built]
[266] (webpack)/hot nonrecursive ^\.\/log$ 160 bytes {0} [built]
[267] (webpack)/hot/emitter.js 77 bytes {0} [built]
[268] multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.jsx 40 bytes {0} [built]
+ 254 hidden modules
Child html-webpack-plugin for "index.html":
chunk {0} index.html 541 kB [entry] [rendered]
[0] ./~/lodash/lodash.js 540 kB {0} [built]
[1] ./~/html-webpack-plugin/lib/loader.js!./src/public/index.html 725 bytes {0} [built]
[2] (webpack)/buildin/global.js 509 bytes {0} [built]
[3] (webpack)/buildin/module.js 517 bytes {0} [built]
webpack: Compiled successfully.
【问题讨论】：
-
浏览器的devTools有错误吗？
-
开发工具中没有错误，react 开发者工具没有将页面检测为 react 页面。不知道为什么？
-
你的 index.html 文件中没有包含 bundle.js 文件
-
你的 index.html 中的 react 组件在哪里？
-
还不够吗？以及如何创建 bundle.js？
标签： javascript node.js reactjs webpack