错误：无法解析 babel-loader ...我的 webpack.config 代码有什么问题？答案

【问题标题】：Error: Can't resolve babel-loader... What is wrong with my webpack.config code?错误：无法解析 babel-loader ...我的 webpack.config 代码有什么问题？
【发布时间】：2018-11-19 09:24:54
【问题描述】：

在过去的几个小时里，我一直把头撞在墙上，试图弄清楚我的 webpack.config 发生了什么。我什至尝试恢复到较旧的提交，但仍然看到同样的问题。任何想法或建议将不胜感激。谢谢！在下面发布我的 webpack.config 和 package.json

webpack.config

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


module.exports = {
  entry: [ '@babel/polyfill', './app/index.js',],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js',
  },
  module: {
    rules: [
      { test: /\.js$/, use: 'babel-loader'},
      { test: /\.css$/, use: [ 'style-loader', 'css-loader']},
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
        template: 'app/index.html'
    })
  ],
  mode: process.env.NODE_ENV === 'production' ? 'production': 'development'
};

----------


 ## package.json

{
  "name": "my-reps",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server",
    "build": "NODE_ENV='production' webpack",
    "firebase-init": "firebase login && firebase init",
    "deploy": "npm run build && firebase deploy"
  },
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ],
    "plugins": [
      "@babel/plugin-proposal-class-properties"
    ]
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/polyfill": "^7.0.0",
    "axios": "^0.18.0",
    "bootstrap": "^4.1.3",
    "classnames": "^2.2.6",
    "firebase-tools": "^4.2.1",
    "jquery": "^3.3.1",
    "lodash.debounce": "^4.0.8",
    "moment": "^2.22.2",
    "prop-types": "^15.6.2",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-places-autocomplete": "^7.2.0",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-twitter-embed": "^1.1.3",
    "react-twitter-widgets": "^1.7.1",
    "reactstrap": "^6.5.0"
  },
  "devDependencies": {
    "@babel/core": "^7.1.6",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-transform-react-constant-elements": "^7.0.0",
    "@babel/preset-env": "^7.1.6",
    "@babel/preset-react": "^7.0.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-loader": "^8.0.0",
    "babel-register": "^6.26.0",
    "css-loader": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.22.1",
    "webpack": "^4.16.5",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  }
}

错误信息：

ERROR in ./node_modules/lodash/lodash.js
Module not found: Error: Can't resolve 'babel-loader' in '/Users/michaelberry/Desktop/my-reps'
 @ ./node_modules/lodash/lodash.js 1:0-41
 @ ./node_modules/html-webpack-plugin/lib/loader.js!./app/index.html

ERROR in ./node_modules/lodash/lodash.js
Module not found: Error: Can't resolve 'babel-loader' in '/Users/michaelberry/Desktop/my-reps'
 @ ./node_modules/lodash/lodash.js 1:0-41
 @ ./node_modules/html-webpack-plugin/lib/loader.js!./app/index.html

ℹ｢wdm｣：编译失败。

【问题讨论】：

有助于查看您的配置...

标签： node.js reactjs webpack

【解决方案1】：

您最近是否碰巧更新了 npm 包？特别是 devDependencies 中的以下包：

网页包
webpack-cli
巴别塔
babel-loader

这些包的某些版本可能会在构建时引起问题。

如果是这样，您可以尝试将 devDependencies 重新安装到您以前使用的版本。

另一种方法是改用最新版本。有时npm update 命令由于某种原因不会安装最新版本。所以你需要去 npm 网站查看每个 devDependencies 的最新版本。

【讨论】：