Webpack 不提供 React 组件答案

【问题标题】：Webpack Not Serving React ComponentWebpack 不提供 React 组件
【发布时间】：2018-10-12 06:08:53
【问题描述】：

我在下面创建了我的 webpack 配置文件：

const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
entry: './src/main.js',
output: {
    filename: 'bundle.js'
},
module: {
    rules: [
        {
            test: /\.js$/,
            exclude: '/node_modules/',
            use: [
                {
                    loader: 'babel-loader'
                }
            ]
        },
        {
            test: /\.html$/,
            use: [
                {
                    loader: 'html-loader',
                    options: {minimize: true}
                }
            ]
        }
    ]
},
plugins: [
    new HtmlWebPackPlugin({
        template: './src/index.html',
        filename: './index.html'
    })
]
};

并添加了所有必要的包babel with env and react presets。我有我的index.html 文件和TestComponent，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React 16 Webpack Setup</title>
</head>
<body>
    <script src="bundle.js" type="text/javascript"></script>

    <div id="test">

    </div>
 </body>
</html>

及组件代码：

import React, { Component } from 'react';

export default class TestComponent extends Component {
render(){
    return (
        <div>
            <h2>React Setup</h2>
        </div>
    )
  }
}

这是我托管组件的main.js 文件：

import React from "react";
import ReactDOM from "react-dom";
import Test from './TestComponent';

ReactDOM.render(<Test/>, document.getElementById("test"));

问题是当我从package.json 运行这个脚本时，我没有得到任何output/dist 文件夹，并且该组件也没有在浏览器中呈现。我必须访问哪个 url 才能看到输出，就像 create-react-app 一样？

【问题讨论】：

你运行的脚本是什么？

标签： reactjs webpack

【解决方案1】：

在 HTML 中 <body> 标记的底部导入您的 <script>。

在您的情况下，浏览器正在读取 DOM 并找到 <script> 标签之前它正在找到 <div id="text"> 节点。这意味着浏览器将通读您的脚本，然后尝试将您的<Test/> 组件呈现为带有id="test" 的HTML 节点。浏览器找不到带有id="test"的HTML节点，因为它还没有读取它，所以它失败了。

有意义吗？见下文...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React 16 Webpack Setup</title>
</head>
<body>

    <div id="test"></div>

    {* import scripts at the bottom of the body *}
    <script src="bundle.js" type="text/javascript"></script>

 </body>
</html>

希望这会有所帮助，如果您仍然遇到问题，请告诉我。

【讨论】：

你的放置方式很有意义，但组件仍然没有渲染
我正在使用 HTMLWebPackPlugin，但它会抛出有关未定义入口点的错误，这可能是问题吗？
我应该从 dist 或 src 文件夹打开 html，我都试过了，结果还是一样
你在哪里使用 HTMLWebPackPlugin？我在上面的 webpack 配置文件中没有看到，你发布了整个文件吗？
我现在已经添加了。请检查。谢谢