Javascript ES6模块，巴别塔/网页包。导入/导出语句不工作

好的，我正在学习react、es6和webpack/babel。我在下面设置了webpack.config：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const merge = require('webpack-merge');
const validate = require('webpack-validator');
const parts = require('./config/webpack-parts');

const PATHS = {
    app: path.join(__dirname, 'app'),
    build: path.join(__dirname, 'build')
};

const HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
    template: PATHS.app + '/index.html',
    filename: 'index.html',
    inject: 'body'
});

const common = {
    entry: {
        app: PATHS.app

    },

    output: {
        path: PATHS.build,
        filename: '[name].js'

    },

    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            }
        ]
    },

    plugins: [HTMLWebpackPluginConfig]

};

var config;

switch(process.env.npm_lifecycle_event) {
    case 'build':
        config = merge(
            common,
            {
                devtool: 'source-map',
                output: {
                    path: PATHS.build,
                    filename: '[name].[chunkhash].js',
                    // This is used for require.ensure. The setup
                    // will work without but this is useful to set.
                    chunkFilename: '[chunkhash].js'
                }
            },
            parts.clean(PATHS.build),
            parts.extractBundle({
                name: 'vendor',
                entries: ['react']
            }),

            parts.minify(),
            parts.extractCSS(PATHS.app)
        );
        break;
    default:
        config = merge(
            common,
            parts.setupCSS(PATHS.app),
            {
                devtool: 'eval-source-map'
            },
            parts.devServer({
                // Customize host/port here if needed
                host: process.env.HOST,
                port: process.env.PORT
            })
        );
        break;
}

module.exports = validate(config);

“config/webpack parts”文件只是一些额外的模块/插件，不需要回答这个问题。我们的目标是使其在项目间可重用。我也安装了babel，下面是.babelrc文件

{
  "presets": [
    "es2015",
    "react"
  ]
}

我还将所有nesscary babel/webpack插件安装在我的package.json文件中：

 "devDependencies": {
    "babel-core": "^6.11.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "clean-webpack-plugin": "^0.1.10",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "html-webpack-plugin": "^2.22.0",
    "style-loader": "^0.13.1",
    "uglify-loader": "^1.3.0",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1",
    "webpack-merge": "^0.14.1",
    "webpack-validator": "^2.2.7"
  },
  "dependencies": {
    "react": "^15.3.0",
    "react-dom": "^15.3.0"
  }

所以现在问题来了。我正在测试这一切是否有效，并使用babel等将es6+react代码转换为es5。我已经设置了测试“hello.js”和“world.js”文件，并将它们导入到我的条目/主文件“index.js”中。这就是错误所在

你好

import React, {Component} from 'react';

export class Hello extends Component {

    render() {
        return (
            <h1>Hello</h1>
        )
    }
}

---

我在“world.js”文件中遇到了类似的错误，我不知道导入/导出语句出了什么问题。我刚刚接触es6模块，但据我所知，我已经正确地导出和导入了。谢谢你的帮助

需要文件时，应使用相对路径，例如：

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import Hello from '../components/hello';
import World from '../components/world';

---

在您的示例中，node在node_modules目录中查找hello和world模块。

当您需要文件时，您应该使用相对路径，例如：

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import Hello from '../components/hello';
import World from '../components/world';

---

在您的示例中，node在node_modules目录中查找hello和world模块。

这些文件相对于索引存在于何处？我在下面检查了正确答案。这与文件相对于索引的位置有关。这些文件相对于索引存在于何处？我在下面检查了正确答案。这与文件相对于索引的位置有关。你怎么知道？是的，这就是问题所在。我把hello.js、world.js、index.html和index.js都放在同一个文件夹中，那么为什么默认情况下它看起来不在同一个目录中呢？这是es6中模块的工作方式吗？Thanks@Foysal94，是，默认情况下，如果不是指向路径，将在节点\模块目录中搜索模块。当需要文件时，始终应提供路径。如果所有文件都在同一目录中，请使用import Hello from./Hello'；你怎么知道？是的，这就是问题所在。我把hello.js、world.js、index.html和index.js都放在同一个文件夹中，那么为什么默认情况下它看起来不在同一个目录中呢？这是es6中模块的工作方式吗？Thanks@Foysal94，是，默认情况下，如果不是指向路径，将在节点\模块目录中搜索模块。当需要文件时，始终应提供路径。如果所有文件都在同一目录中，请使用import Hello from./Hello'；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Weather App</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
    <div id="hello"></div>
    <div id="world"></div>
</body>
</html>

ERROR in ./app/index.js
Module not found: Error: Cannot resolve module 'hello' in /Users/Foysal/Google Drive/Learning Projects/ReactJS-Tutorial/weather-app/app
 @ ./app/index.js 11:13-29

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import Hello from '../components/hello';
import World from '../components/world';