Question

我正在尝试使用React和Webpack创建一个项目。我是使用这些工具的新手，但找不到与我确实工作过的错误有关的解决方案。

我有一个使用StartPage.js构建的StartPage.html，该版本构建于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

尽管webpack会创建它，但它不是在bundle.js中创建的。 Webpack folder after npm run build

但是我在控制台中遇到此错误：_registerComponent（...）：目标容器不是DOM元素..我已经进行了详尽的研究，但找不到找到的解决方案对我有用：例如更改div的顺序带有bundle.js脚本的id =“” like this one, where the script is created automatically by webpack

我在这个错误上花费了很多时间，或者试图找到另一种解决方案以使用Webpack创建多个页面。

这是webpack.config.prod.js，并且关于页面的开发方式是相同的：

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'
        }),

我已经在module.exports条目中指定了.js文件：

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

如果有人对这可能是什么问题有个想法。

JS文件未出现在build.js中，但创建了另一个JS

0 个答案: