在具有反应的多页面应用程序中不允许对入口点的依赖

Question

我仔细搜索了我遇到的相同问题，但没有发现任何有用的信息。

webpack 1.13.1。 Mac OS X El Capitan 最新版本。

我想要完成的事情

我想创建一个 webpack 构建来开发多个页面应用程序。

我想看到这样的结构： 来源

/source/page1/page1.css
/source/page1/page1.js
/source/page1/page1.html

公开

/public/page1/page1.css
/public/page1/page1.js
/public/page1/page1.html

当前版本

这就是我所做的。 https://gist.github.com/lavezzi1/9cc0e58cd7d2b8f2470e703022a41db7

我用 vue.js 对其进行了测试，它运行良好。但现在我想让它也可以与 react.js 一起使用。 在 dev move 中，一切正常，但是当我为 prod build 运行任务时，我收到了这个错误：

./source/pages/index.js 中的错误 未找到模块：错误：不允许对入口点的依赖

我做了什么。这是我的页面文件夹：

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

那我做错了什么？我是 react.js 的新手，也许我不明白。

在 vue.js 中我只是创建文件：

index.html
index.css
index.vue
index.js 

一切都按预期进行。

我真的很希望你们帮助我。

Answer 1

为什么不直接将 js 文件指定为入口点并在该入口文件中导入 css。对于多个 js 入口文件，您可以使用 webpack 的代码拆分功能。

https://webpack.github.io/docs/code-splitting.html

在你的 webpack.config.js 文件中你可以定义如下的入口文件。

entry: { 
    lite: "./lite.js", pro: "./pro.js",
},
output: { filename: "dist/[name].js" },