为什么 Webpack 无法解析“babel-loader”？

Question

当我为此代码库配置 Webpack 时，Webpack 抱怨它Can\'t resolve \'babel-loader\'. 到底是什么失败了，我怎样才能询问 Webpack 它的抱怨是什么？

\n\n

Webpack 配置：

\n\n

// webpack.config.js\n\nconst path = require(\'path\');\nconst webpack = require(\'webpack\');\n\nmodule.exports = {\n    entry: \'./source/main.jsx\',\n    output: {\n        path: path.resolve(__dirname, \'dist\'),\n        filename: \'app.js\',\n    },\n    resolve: {\n        modules: [\n            path.resolve(__dirname, \'source\'),\n            \'/usr/share/javascript\',\n            \'/usr/lib/nodejs\',\n        ],\n    },\n    module: {\n        loaders: [\n            // Transform JSX with React.\n            {\n                test: /\\.jsx$/,\n                loader: \'babel-loader\',\n                query: {\n                    presets: [\'es2015\', \'react\'],\n                },\n            },\n        ],\n    },\n};\n

\n\n

入口模块：

\n\n

// source/main.jsx\n\n"use strict";\n\nimport Application from \'./components/Application\';\n\nconst applicationElement = <Application />;\nReactDOM.render(\n    applicationElement,\n    document.getElementById(\'application\'),\n);\n

\n\n

问题是否类似于搜索路径？如果是，为什么错误不能告诉我需要纠正哪些设置？

\n\n

该babel-loader模块肯定已安装。（因此我不想再次安装它 \xe2\x80\x93 所以npm install不会有帮助 \xe2\x80\x93 我试图告诉 Webpack 从已经安装的位置使用它。）它的包定义是在/usr/lib/nodejs/babel-loader/package.json。

\n\n

resolve.modules我已使用搜索路径列表将 Webpack 的解析器指向 \xe2\x80\x93，而不是其默认解析器行为 \xe2\x80\x93 。正确的？

\n\n

所以解析器应该能够通过指定的搜索路径/usr/lib/nodejs和名称找到它babel-loader，不是吗？

\n\n

（这提出了一个单独的问题，关于如何说服 Webpack 告诉我它正在寻找什么，以便更容易地诊断它。）

\n\n

我如何告诉 Webpack 它应该用来解析该babel-loader名称的具体位置？

\n

Answer 1

Webpack 配置设置resolve适用于导入的模块。加载器的解析方式不同；该resolveLoader设置具体配置如何解析加载程序。

因此，添加resolveLoader到 Webpack 配置中是可行的：

// webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: './source/main.jsx',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.js',
    },
    resolve: {
        // Configure how Webpack finds modules imported with `import`.
        modules: [
            path.resolve(__dirname, 'source'),
            '/usr/share/javascript',
            '/usr/lib/nodejs',
        ],
    },
    resolveLoader: {
        // Configure how Webpack finds `loader` modules.
        modules: [
            '/usr/lib/nodejs',
        ],
    },
    module: {
        loaders: [
            // Transform JSX with React.
            {
                test: /\.jsx$/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react'],
                },
            },
        ],
    },
};