Question

我对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

这是我的webpack.config.js：

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

我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：

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

import App from './app';

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

这里是app.js：

import React from 'react';

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

export default App;

我怎么能得到这个东西？

Answer 1

您需要设置加载程序规则，以便将文件实际处理并转换为兼容浏览器的ES5。 Webpack不会自动将您的ES2015和JSX代码转换为Web兼容，您必须告诉它将loader应用于某些文件以将它们转换为与Web兼容的代码，错误状态。由于您不这样做，因此会发生错误。

假设您有Webpack版本2+，请使用配置中的rules属性：

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中的RegEx选择以.js或.jsx结尾的文件的Webpack配置添加规则。然后，它使用babel-loader预设es2015和react来使用Babel并将您的JSX和ES2015代码转换为ES5代码。您还需要安装以下软件包：

babel-core
babel-loader
babel-preset-react

你可以摆脱：

babel-cli

Webpack documentation for modules的更多信息。

如何让Webpack转换ES6代码？

1 个答案: