Webpack 如何获取用于传输ES6代码的网页包？

我对Webpack很陌生，我只是想在这里开始一个简单的项目。我得到以下错误：

ERROR in ./index.js
Module parse failed: /Users/jay/Documents/personal_projects/open_phil_grants_visualizer/index.js Unexpected token (6:16)
You may need an appropriate loader to handle this file type.
| import App from './app';
| 
| ReactDOM.render(<App />, document.getElementById('content'));
| 
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./index.js

my

package.json中的依赖项：

"dependencies": {
  "d3": "^4.9.1",
  "lodash": "^4.17.4",
  "react": "^15.6.1",
  "react-d3-basic": "^1.6.11",
  "react-dom": "^15.6.1"
},
"devDependencies": {
  "babel-cli": "^6.24.1",
  "babel-preset-es2015": "^6.24.1",
  "webpack-dev-server": "^2.4.5"
}

这是我的
index.js
：

module.exports = {
    entry: './index.js',
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },
    devtool: 'source-map'
};

import React from 'react';
import ReactDOM from 'react-dom';

import App from './app';

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

import React from 'react';

class App extends React.Component {
  render() {
    return(
      <h2>
        Hello from the App component!
      </h2>
    )
  }
}

export default App;

我如何才能让这件事继续进行？
您需要设置加载程序规则，以便实际处理文件并将其传输到与浏览器兼容的ES5。Webpack不会自动将您的ES2015和JSX代码转换为web兼容的代码，您必须告诉它对某些文件应用a，以便将它们转换为web兼容的代码，如错误所述。因为您没有这样做，所以会发生错误

假设您有Webpack版本2+，请在配置中使用
规则
属性：

module.exports = {
  entry: './index.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.jsx?/,
        include: 'YOUR_APP_SRC_DIR',
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015', 'react']
          }
        }
      }
    ]
  }
};

这将向网页包配置中添加一条规则，该规则使用
test
中的正则表达式选择以
.js
或
.jsx
结尾的文件。然后，它使用带有预设的
es2015
和
react
的
babel loader
来使用babel并将您的JSX和es2015代码传输到ES5代码。您还需要安装以下软件包：


babel core
babel加载器
babel预设反应

你可以摆脱：


babel cli

更多信息请参见。
注意，
babel-preset-es2015
从babel v6开始就不推荐使用。现在建议使用。