Javascript 您可能需要一个合适的加载程序来处理此文件类型，目前没有从'；配置加载程序导入计数器/components/counter.jsx'；

我正在尝试设置一个新的js/typescript环境，以便在使用react、Thread和webpack时练习web开发，但我在尝试设置它时不断遇到这个错误。我当前的配置如下所示。我对这一切都是新的，所以如果你看到我应该改变什么，请让我知道

webpack.config.js

const path = require('path')

module.exports = {
  devServer: {
    contentBase: path.resolve(__dirname, './public'),
    historyApiFallback: true,
  },
  entry: path.resolve(__dirname, './src/index.js'),
  resolve: {
    extensions: ['*', '.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['react'],
            },
          },
        ],

        test: /\.(scss)$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: function () {
                return [require('precss'), require('autoprefixer')]
              },
            },
          },
          {
            loader: 'saas-loader',
          },
        ],
        exclude: /node_modules/,
      },
    ],
  },
  output: {
    filename: 'bundle.js',
  },
}

index.js

import React from 'react'
import {render} from 'react-dom'
import 'bootstrap/dist/css/bootstrap.css'
import Counter from './components/counter.jsx'

ReactDOM.render(<Counter />, document.getElementById('app'))

---

提前谢谢

第一眼看上去一切正常。但问题似乎出在您的webpack.config文件中

试试下面

const path = require('path')

module.exports = {
  devServer: {
    contentBase: path.resolve(__dirname, './public'),
    historyApiFallback: true,
  },
  entry: path.resolve(__dirname, './src/index.js'),
  resolve: {
    extensions: ['*', '.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules)/,
        use: 
          {
            loader: 'babel-loader',
            options: {
                presets:["@babel/preset-env","@babel/preset-react" ]
            },
          },
      },
    {
        test: /\.(scss)$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: function () {
                return [require('precss'), require('autoprefixer')]
              },
            },
          },
          {
            loader: 'saas-loader',
          },
        ],
        exclude: /node_modules/,
      },
    ],
  },
  output: {
    filename: 'bundle.js',
  },
}

---

此外，更改此选项后，还存在未安装的css加载程序错误，因此您可以安装并将其添加到package.json中。但是，由于您已经有了Sass软件包，您可能希望在index.js中引用引导Sass版本-随您而定。希望这有帮助

import Counter from./components/Counter'

不带文件结尾应用程序的主文件是index.js，其中包含需要传输的组件，因此需要考虑上述问题。这与

test:/\.jsx？$/，

完全相同。@GuyIncognito:你说得对，它将评估为相同的结果。我的错误-删除答案。经过一点故障排除后更新了答案。

const path = require('path')

module.exports = {
  devServer: {
    contentBase: path.resolve(__dirname, './public'),
    historyApiFallback: true,
  },
  entry: path.resolve(__dirname, './src/index.js'),
  resolve: {
    extensions: ['*', '.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules)/,
        use: 
          {
            loader: 'babel-loader',
            options: {
                presets:["@babel/preset-env","@babel/preset-react" ]
            },
          },
      },
    {
        test: /\.(scss)$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: function () {
                return [require('precss'), require('autoprefixer')]
              },
            },
          },
          {
            loader: 'saas-loader',
          },
        ],
        exclude: /node_modules/,
      },
    ],
  },
  output: {
    filename: 'bundle.js',
  },
}