Webpack не обслуживающий компонент React - PullRequest
Новая
       4

Webpack не обслуживающий компонент React

0 голосов
/ 11 октября 2018

Я создал свой конфигурационный файл 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, а также компонент не отображается в браузере.По какой ссылке мне нужно перейти, чтобы увидеть результат, как с create-react-app?

1 Ответ

0 голосов
/ 11 октября 2018

Импортируйте <script> внизу тега <body> в HTML.

В вашем случае браузер читает DOM и находит тег <script> перед это поиск узла <div id="text">.Это означает, что браузер прочитает ваш скрипт, а затем попытается преобразовать ваш <Test/> компонент в узел HTML с id="test".Браузер не может найти узел HTML с id="test", потому что он еще не прочитал его, поэтому он не работает.

Имеет смысл?См. Ниже ... 

<!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>

Надеюсь, это поможет, дайте мне знать, если у вас все еще есть проблемы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...