首页 文章

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

提问于
浏览 次
0

我正在尝试使用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'

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

谢谢

德里克

reactjs webpack babel

2 回答

  • 1

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

    import Hello from "./components.jsx";

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

    回复于
  • 2

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

    import Hello from "./components.jsx";
    回复于

相关问题