找不到模块：错误：无法解析“./component/Hello”

Question

我正在尝试导入一个简单的组件，但 webpack 似乎找不到它。路线很好，webpack 配置中的“解决”也很好，因此我不明白问题出在哪里。 请给它看看。 顺便说一句，它是一个 Sails/React 环境。

./assets/src/component/Hello.jsx 中的错误 6:12 模块解析失败：意外令牌 (6:12) 您可能需要适当的加载器来处理此文件类型，目前没有配置加载器来处理此文件。

你好.jsx：

import React from 'react'

class Hello extends React.Component {
    render() {
        return(
            <div> // Err supposed to be here (line6)
                Hello World!
            </div>
        )
    }
}

export default Hello;

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './component/Hello'

const App = () => {
  return (
    <div>
      Simple Sails-React stater
      <Hello/>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

.babelrc:

{
   "presets": ["@babel/env", "@babel/react"]
}

webpack 配置文件：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    entry: './assets/src/index.js'
  },
  output: {
    path: __dirname + '/.tmp/public',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        use: 'babel-loader',
        test: /\.js$/,
        exclude: /node_modules/
      },
      {
        use: ['style-loader', 'css-loader'],
        test: /\.css$/
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: 'assets/src/index.html'
    })
  ]
};

结构是这样的：

-src
--component
----Hello.jsx
--index.js
--index.html

Answer 1

您可以尝试将扩展名更改为 Hello.js 或将 bable-loader 测试更改为

test: /\.(js|jsx)$/,