Файл JS отсутствует в build.js, но создает другой JS - PullRequest
Новая
       8

Файл JS отсутствует в build.js, но создает другой JS

0 голосов
/ 02 декабря 2018

Я пытаюсь создать проект с помощью React и Webpack.Я новичок в их использовании, но ни одно из найденных решений, связанных с ошибкой, с которой я столкнулся, не работает.

У меня есть файл StartPage.html, использующий сборку StartPage.js, которая присутствует в bundle.js иработает отлично.

StartPage.html 

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Copyright application</title>
</head>
<body>
    <a href="ImageUploader.html">Image Upload</a>
    <div id="root2"></div>
</body>
</html>

StartPage.js 

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
class StartPage extends Component {

 render() {
      return (
        <div> StartPage </div>
 );
 }

}

ReactDOM.render(
  <StartPage />,
  document.getElementById('root2')
);


export default StartPage

Но теперь у меня есть ImageUploader.html, который построен в том же стиле, но сболее сложная сторона в ImageUploader.js

ImageUploader.html 

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Upload Image</title>
</head>
<body>
    <div id="image"></div>
</body>
</html>

ImageUploader.js - только рендер и DOM 

  render() {
    return (
      <div className="ImageUploader">
        <nav className="navbar pure-menu pure-menu-horizontal">
          <a href="#" className="pure-menu-heading pure-menu-link">IPFS File Upload DApp</a>
        </nav>

        <main className="container">
          <div className="pure-g">
            <div className="pure-u-1-1">
              <h1>Your Image</h1>
              <p>This image is stored on IPFS & The Ethereum Blockchain!</p>
              <h2>Upload Image</h2>
              <form onSubmit={this.onSubmit} >
                <input type='file' onChange={this.captureFile} />
                <input type='submit' />
              </form>
            </div>
          </div>
        </main>
      </div>
    );
  }
}

ReactDOM.render(
  <ImageUploader />,
  document.getElementById('image')
);

export default ImageUploader

Этот не созданв bundle.js, хотя веб-пакет создает его. Папка Webpack после запуска npm build

Но у меня есть эта ошибка в консоли: _registerComponent (...): Целевой контейнер не является элементом DOM .. который я тщательно исследовал и ни одногоиз найденных решений работал для меня: как изменение порядка div id = "" с помощью скрипта bundle.js , как этот, где скрипт автоматически создается webpack

IЯ потратил довольно много времени на эту ошибку или пытался найти другое решение для создания нескольких страниц с помощью Webpack.

Это webpack.config.prod.js и dev определяется таким же образом в отношении страниц.:

webpack.config.prod.js 

  plugins: [

    new InterpolateHtmlPlugin({
      PUBLIC_URL: publicUrl
    }),
    new HtmlWebpackPlugin({
      template: './src/public/StartPage.html',
           inject: true,
           chunks: ['start'],
           filename: 'StartPage.html'
    }),
    new HtmlWebpackPlugin({
          template: './src/public/ImageUploader.html',
          inject: true,
          chunks: ['image'],
          filename: 'ImageUploader.html'
        }),

И я указал файл .js в записи module.exports: 

  entry: {
    image: './src/ImageUploader/ImageUploader.js',
    start: './src/StartPage/StartPage.js'

Если кто-тоесть представление о том, что может быть не так с этим ..

...