Question

我是新手并且遗漏了一些东西。当我执行npm start时没有错误，当我在浏览器中打开时，只显示页面标题，反应不会呈现hello world消息。怎么了？????我花了太多时间在这上面。在开发工具中没有错误，反应开发人员工具不会将页面检测为反应页面。我不知道为什么？

我的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.

Answer 1

首先将webpack config中的输出文件扩展名从.jsx替换为.js，然后在运行webpack后，webpack在Aug. 03, 2017生成一个名为/的捆绑文件。需要在index.js

中包含此文件

webpack.config.js

index.html

的index.html

output: {
    filename: 'index.js',
    publicPath: '/',
  },

注意：将<!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"> </head> <body> <div id="checkabc"></div> <script src="index.js"></script> </body> </html>替换为相对于您的路径 ./path/to/index.js

最简单的反应代码不起作用

1 个答案: