webpack巴貝爾和反應簡單的例子失敗

我想用React和Babel的webpack。我創建了一個簡單的例子：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」，我總是得到錯誤信息：

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

它是這樣一個簡單的例子，我必須做出巨大的愚蠢的錯誤。但我無法找到它。

感謝

德里克

來源

2016-06-08 derek

當您嘗試導入一個模塊按名稱，預計可在node_modules下找到。這可能不是你想要它的地方，所以你應該通過（相對）路徑導入它。

import Hello from "./components.jsx";

如果index.js和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巴貝爾和反應簡單的例子失敗

回答

相關問題