找不到入口模块中的错误：错误：无法解析“babel-loader”答案

【问题标题】：ERROR in Entry module not found: Error: Can't resolve 'babel-loader'找不到入口模块中的错误：错误：无法解析“babel-loader”
【发布时间】：2018-06-04 10:22:30
【问题描述】：

我是反应初学者。在设置安装和加载所有依赖项时，我最终运行了npm start 命令，但这会产生错误 ERROR in Entry module not found: Error: Can't resolve 'babel-loader' in 'C: \Users\me\Documents\React\react-playlist' 我已正确执行所有安装步骤。我还附上了项目文件夹的screenshot。我还在全球安装了 webpack v 3.10.0，但这也没有用。我还尝试在 package.json 文件中插入解析加载程序代码，但这也不起作用。这是错误picture.

P.S.：我正在关注这个tutorial

下面是我项目的代码。 Package.json 文件：

{
  "name": "react-playlist",
  "version": "1.0.0",
  "description": "All the course files for the Net Ninja React tutorial playlist on YouTube",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "npm run build",
    "build": "webpack -d && webpack-dev-server --content-base src/ --inline --hot --port 1234"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/iamshaunjp/react-playlist.git"
  },
  "author": "me",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/iamshaunjp/react-playlist/issues"
  },
  "homepage": "https://github.com/iamshaunjp/react-playlist#readme",
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7"
  }
}

Webpack.config.js

var path = require('path');

module.exports = {

    entry: path.resolve(__dirname, 'src') + '/app/index.js',
    output: {
        path: path.resolve(__dirname, 'dist') + '/app',
        filename: 'bundle.js',
        publicPath: '/app/'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                include: path.resolve(__dirname, 'src'),
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015', 'env']
                }
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            }
        ]
    } };

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>React - Novice to Ninja!</title>
    </head>
    <body>
      <script src="/app/bundle.js"></script>
    </body>
</html>

【问题讨论】：

确保首先使用 npm install 安装所有包，然后使用 npm start
@cdoshi 它已经是最新的了。
webpack 正在弃用 module.loaders。尝试改用module.rules：stackoverflow.com/questions/43002099/…
@casraf 它抛出了一个巨大的错误，从“提供的选项/查询没有加载器（使用加载器+选项）”开始。我认为这不是一个正确的举动，

标签： javascript json node.js reactjs webpack

【解决方案1】：

看起来webpack 配置的module.loaders 部分适用于旧版本的webpack，而您使用的是最新版本 (3.10.0)。对于您的配置，最新的webpack 应该是这样的：

module: {
  rules: [
    { 
      test: /\.js$/,
      include: [
        path.resolve(__dirname, "src")
      ],
      use: {
        loader: 'babel-loader'
      },
      options: {
        presets: ['react', 'es2015', 'env']
      }
    },
    {
       test: /\.css$/,
       use: {
         loader: 'style-loader!css-loader'
       }     
    }
  ]

所有webpack 选项都在配置部分here 的文档中进行了描述。

【讨论】：

【解决方案2】：

详情请看这篇帖子(ERROR in multi) Module not found: Error: Can't resolve 'babel/loader'并执行以下命令：

npm install -D babel-loader @babel/core @babel/preset-env webpack

来源：https://github.com/babel/babel-loader

【讨论】：