Question

我在下面创建了我的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一样的输出？

Answer 1

将<script>导入HTML的<body>标记的底部。

在您的情况下，浏览器正在读取DOM，并且在找到<script>节点之前，找到了{strong>之前的<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>

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

Webpack不提供React组件

1 个答案: