没有适当的加载程序来处理js WebPack的Babel-loader

Question

我是新来的WebPack和意外的错误捆绑json数据。我试图使用json-loader来捆绑json，但在那里得到了同样的错误。

ERROR in ./src/index.js 6:7
Module parse failed: Unexpected token (6:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import data from './data/recipes.json';
| 
> render(<Menu recipes={data} />, document.getElementById('root'));

webpack 5.53.0 compiled with 1 error in 82 ms

./src/index.js

import React from 'react';
import { render} from 'react-dom';
import Menu from './components/Menu';
import data from './data/recipes.json';

render(<Menu recipes={data} />, document.getElementById('root'));

webpack.config.js

var path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist', 'assets'),
    filename: 'bundle.js'
  },
  module: {
    rules: [{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }]
  }
};

B.法律改革委员会

{
  "presets": [
    "@babel/preset-env", 
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ]
  ]
}

//一些虚假的评论“看起来你的文章大部分是代码。。。东西“//一些要破解的虚拟评论”看起来你的帖子大部分都是代码。。。事情

package.json

{
  "name": "recipes-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "serve": "^12.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.15.5",
    "@babel/preset-env": "^7.15.6",
    "@babel/preset-react": "^7.14.5",
    "babel-loader": "^8.2.2",
    "webpack": "^5.53.0",
    "webpack-cli": "^4.8.0"
  }
}

更新：

在'webpack.config.js'文件中，我试图将'loader'更改为'use'，同样的事情。。。

从“react dom”和ReactDOM.render（）导入ReactDOM也是一样的。。。

Answer 1

webpack.config.js位于目录结构的错误位置。