Question

当我为此代码库配置Webpack时，Webpack会抱怨它Can't resolve 'babel-loader'。究竟什么是失败的，我怎么能问Webpack它的抱怨是什么？

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: {
        modules: [
            path.resolve(__dirname, 'source'),
            '/usr/share/javascript',
            '/usr/lib/nodejs',
        ],
    },
    module: {
        loaders: [
            // Transform JSX with React.
            {
                test: /\.jsx$/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react'],
                },
            },
        ],
    },
};

输入模块：

// source/main.jsx

"use strict";

import Application from './components/Application';

const applicationElement = <Application />;
ReactDOM.render(
    applicationElement,
    document.getElementById('application'),
);

问题是否类似于搜索路径，如果是这样，为什么错误无法告诉我需要更正哪些设置？

babel-loader模块已明确安装。（因此我不想再安装它 - 所以npm install无济于事 - 我试图告诉Webpack在已安装的位置使用它。）它的包定义在/usr/lib/nodejs/babel-loader/package.json

我使用resolve.modules搜索路径列表指出了Webpack的解析器 - 而不是默认的解析器行为。正确的吗？

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

（这提出了一个单独的问题，关于如何convince Webpack to just tell me what it's looking for，以便更容易诊断出来。）

我如何告诉Webpack解决babel-loader名称时应使用的具体位置？

Answer 1

我认为您正在寻找的webpack.config如下：

module: {
  loaders: [
    {test: /\.js$/, include: path.join(__dirname, 'src'), loaders: ['babel']},
  ]
}

希望有帮助：）

Answer 2

Webpack配置设置resolve适用于导入的模块。装载机的解决方式不同; the resolveLoader setting配置如何专门解析加载器。

因此，将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'],
                },
            },
        ],
    },
};

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

2 个答案: