为什么 webpack 找不到加载器答案

【问题标题】：why webpack can't find loader为什么 webpack 找不到加载器
【发布时间】：2017-01-01 00:21:30
【问题描述】：

这是我的 pacjage.json：

{
  "name": "redux-todo",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "start": "webpack-dev-server"
  },

  "devDependencies": {
    "babel": "^6.5.2",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.13.2",
    "babel-preset-react": "^6.11.1",
      "webpack": "^1.13.2"
   },
  "dependencies": {
   "react": "^15.3.1",
    "react-dom": "^15.3.1",
    "react-redux": "^4.4.5",
     "redux": "^3.5.2"
  }
}

webpack.config.js：

var path = require('path');

module.exports = {
entry: './index.js',
output: {
    path: './',
    filename: 'app.js'
},
devServer: {
    inline: true,
    port: 3334
},
resolveLoader: { root: path.join(__dirname, "node_modules") },
module: {
    loaders: [
        {
            test: /\.js$/,
            exclude: '/node_modules',
            loader: 'babel',
            query: {
                presets: ['es2015', 'react']
            }
        }
    ]
}
};

我有以下项目目录结构：

├── actions.js
├── components
├── containers
├── index.js
├── node_modules
├── package.json
├── reducers.js
├── test.js
└── webpack.config.js

项目目录的绝对路径是/home/dmitriy/WebstormProjects/Redux-todo

那么为什么当我运行 npm start 时它会因错误而崩溃：

(webpack)/~/process/browser.js 中的错误模块构建失败：错误：找不到相对于目录“/usr/local/lib/node_modules/webpack/node_modules/process”的预设“es2015”

这个/usr/local/lib/node_modules/webpack/node_modules/process 路径是什么，为什么它说它是相对于它进行搜索的？

搜索这个错误我发现

重要提示：这里的加载器是相对于它们所应用的资源进行解析的。这意味着它们不会相对于配置文件进行解析。如果你从 npm 安装了加载器，并且你的 node_modules 文件夹不在所有源文件的父文件夹中，那么 webpack 找不到加载器。您需要将 node_modules 文件夹作为绝对路径添加到 resolveLoader.root 选项。 (resolveLoader: { root: path.join(__dirname, "node_modules") })

应该修复它，但正如您所见，我的配置中有它并且仍然看到此错误。

我在 ubuntu 16.04 LTS，nodejs 版本是 4.2.6，npm 3.5.2

【问题讨论】：

在你的父目录中有.babelrc 文件吗？
不，没有.babelrc

标签： javascript node.js unix npm webpack

【解决方案1】：

您只是将/node_modules 排除在绝对路径之外：

exclude: '/node_modules'

如果您想递归地排除所有node_modules，请尝试使用：

exclude: /node_modules/

区别是微妙的，但前者使用的是一个字符串，该字符串具有到根 node_modules 的绝对路径，而后者是一个与 node_modules 匹配的任何路径的正则表达式。

这应该可以在没有 resolveLoader 配置的情况下工作。所以你可以删除这个字段：

resolveLoader: { root: path.join(__dirname, "node_modules") },

【讨论】：

我看不出排除节点模块与 webpack 无法解析预设的事实有何关系 - 正如您在配置的最终版本中看到的那样，我仍然没有尾部斜杠在 node_modules 之后，它仍然有效。
因为不排除/usr/local/lib/node_modules/webpack/node_modules/process。它不在您的项目文件夹中（在您的项目node_modules 中）。它可能已在全球范围内安装。你的 babel 加载器甚至不应该处理这些文件:)。我更喜欢使用include 而不是exclude。它更明确，更不容易出错。

【解决方案2】：

实际上我删除了node_modules，稍微调整了一下package.json：

{
  "name": "redux-todo",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
  "start": "webpack-dev-server"
  },
 "dependencies": {
    "babel": "^6.5.2",
   "react": "^15.3.1",
   "react-dom": "^15.3.1",
    "react-redux": "^4.4.5",
    "redux": "^3.5.2"
  },
  "devDependencies": {
   "babel-core": "^6.13.2",
    "babel-loader": "^6.2.5",
   "babel-preset-es2015": "^6.13.2",
   "babel-preset-react": "^6.11.1",
   "webpack": "^1.13.2",
   "webpack-dev-server": "^1.14.1"
 }
}

aa并且它起作用了。不知道为什么。这是 webpack 配置现在的样子：

var path = require('path');

module.exports = {
entry: './index.js',
output: {
    path: './',
    filename: 'app.js'
},
devServer: {
    inline: true,
    port: 3334
},
module: {
    loaders: [
        {
            test: /\.js$/,
            exclude: '/node_modules',
            loader: 'babel',
            query: {
                presets: ['es2015', 'react']
            }
        }
    ]
}
};

我不知道¯_(ツ)_/¯是什么意思

【讨论】：

【解决方案3】：

对于我的项目，加载器的配置如下：

{
  test: /\.js$/,
  exclude: '/node_modules',
  loader: "babel-loader"
}

.babelrc 文件包含以下内容：

{
  "presets": ["es2015","react"]
}

观看您发布的第一个 webpack 配置，我注意到选项 resolveLoader: { root: path.join(__dirname, "node_modules") }。如果您的所有加载器都位于正确的路径（项目根目录上的node_modules 目录），则不需要此选项。

【讨论】：

【解决方案4】：

您的意思是使用babel-loader 吗？如果是这样，并且如果node_modules 中没有babel-loader 文件夹，那么npm install babel-loader@7.1.1 --save-dev 应该会解决问题并生成该文件夹。

【讨论】：