Question

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

./ assets / src / component / Hello.jsx中的错误6:12 模块解析失败：意外的令牌（6:12）您可能需要适当的加载程序来处理此文件类型，当前未配置任何加载程序来处理此文件。

Hello.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)$/,

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

1 个答案: