Question

我正在尝试使用React和Babel进行webpack。我创建了一个简单的例子：

components.jsx：

import React from 'react';
import ReactDOM from 'react-dom';
import { render } from 'react-dom'

class Hello extends React.Component {
  render() {
    return <h1>Hello</h1>
  }
}
ReactDOM.render(<Hello/>, document.getElementById('test'));
export default Hello;

index.js：

import Hello from "components.jsx";

的index.html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Webpack, React and Babel example</title>
</head>
<body>
  <div>  </div>
  <div id="test"> </div>
  <script src="bundle.js"> </script>
</body>
</html>

webpack.config.js：

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: './index.js',
  output: { path: __dirname, filename: 'bundle.js' },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  }
};

我还安装了所有必要的模块：babel-loader，babel-core babel-preset-es2015 babel-preset-react，react，react-dom。

但是，当我在当前文件夹中键入“webpack”时，我总是收到错误消息：

./index.js中的错误找不到模块：错误：无法解析模块中的'components.jsx'

这是一个简单的例子，我必须犯下一个巨大的愚蠢错误。但我找不到它。

由于

德里克

Answer 1

当您尝试按名称导入模块时，预计会在node_modules下找到该模块。这可能不是你想要它的地方，所以你应该通过（相对）路径导入它。

import Hello from "./components.jsx";

如果index.js和components.jsx文件共享一个文件夹，则上述操作将起作用。如果他们不这样做，则需要更改./以指向正确的位置。

Answer 2

据我了解，index.js和components.jsx位于同一个文件夹中，如果是，则路径应为以下

import Hello from "./components.jsx";

webpack babel和反应简单的例子失败了

2 个答案: