Question

我正在使用webpack构建一个带有react的简单表单。我是webpack的新手并做出反应，所以可能有一个明显的解决方案，但我无法弄清楚。

我的代码结构（简化）：

root:
- server.js
- webpack.config.js
- src:
-- App.js
-- index.js
- public:
-- index.html
-- bundle.js

在我的app.js中只有一个组件。我已将ReactDOM.render方法排除在文件index.js中。既然我已经做到了，那就不再适用了。在它工作之前就好了。

该应用程序不再呈现在我的index.html中。我猜测 webpack仅编译我的app.js文件并忽略我的index.js。但我无法确切地知道。

当我将index.js加入App.js时，一切正常。

// /src/App.js
import React, {Component} from 'react';

class App extends Component {
 constructor(props) {
   super(props);
   this.state = {
     form: 'firmenkontakt'
   }
 };

 render() {
   return (
     <div className={this.state}>
       <form method="post" id={this.state}>
                ...
            </form>
     </div>
   )
 }
}

export default App;

渲染文件如下所示：

// /src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

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

我想知道我的webpack.config.js

是否有任何问题

// /webpack.config.js
let path = require('path');

const webpack = require('webpack');

module.exports = {
  entry: './src/App.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'public')
  },
  watch: true,
  module: {
    loaders: [
      {
        test:/\.js$/,
        exclude: /node_module/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-1']
        }
      }
    ]
  }
}

Answer 1

您的输入文件应为src/index.js' and it must import App.js`

为什么webpack会忽略index.js，尽管它在我的app.js的同一目录中，编译得很好

1 个答案: