Question

这是我的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

Answer 1

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

exclude: '/node_modules'

如果你想递归排除所有node_modules尝试使用：

exclude: /node_modules/

差别很小但前者使用的是一个字符串，其中包含根node_modules的绝对路径，后者是一个与node_modules匹配任何路径的正则表达式。

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

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

Answer 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"
 }
}

aaand有效。不知道为什么。以下是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']
            }
        }
    ]
}
};

我不知道那是什么关于¯_（ツ）_ /¯

Answer 3

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

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

.babelrc文件包含：

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

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

Answer 4

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

为什么webpack找不到加载程序

4 个答案: