webpack babel and react 간단한 예제가 실패합니다.

React와 Babel을 사용하여 webpack을 테스트 중입니다.webpack babel and react 간단한 예제가 실패합니다.

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.

ERROR in ./index.js Module not found: Error: Cannot resolve module 'components.jsx' in

그것은 같은 간단한 예를 들어 내가이 거대한 바보 같은 실수를해야합니다 :이 현재 폴더에 "웹팩"를 입력 할 때

하지만, 난 항상 오류 메시지를 받았습니다. 그러나 나는 그것을 찾을 수 없다.

감사

데릭

출처

2016-06-08 derek

다음 모듈을 이름순으로 보면 node_modules 아래에있을 것으로 예상됩니다. 아마도 원하는 위치가 아니기 때문에 (상대 경로를 통해) 가져와야합니다. index.js 및 components.jsx 파일 폴더를 공유

import Hello from "./components.jsx";

경우, 위에서 작동합니다. 그렇지 않은 경우 올바른 위치를 가리 키도록 ./을 변경해야합니다.

출처

2016-06-08 07:03:55 ivarni

굉장! 매력처럼 작동합니다. – derek

내가 알 수있는 바와 같이, index.js 및 components.jsx은 그것이 사실 인 경우, 경로를해야한다, 같은 폴더에있는 가져올 때

import Hello from "./components.jsx";

출처

2016-06-08 07:03:47

webpack babel and react 간단한 예제가 실패합니다.

답변

관련 문제