css - 给定相同的别名配置，为什么 `css-loader` 不以与 `enhanced-resolve` 相同的方式解析此图像请求？

Question

这个问题使用最小的 repo进行上下文化，以便您可以重现我所看到的内容。

当加载器和 Webpack 使用相同的配置时，我期望css-loader@0.28.0其行为方式与's 模块解析器相同。webpack@4.12.0alias

这是来自 repo 的选择，显示了别名配置以及它与解析器的关系。

const context = path.resolve(__dirname, 'pkgs', target);
const dist = path.resolve(__dirname, 'dist');
const pkgsdir = path.resolve(__dirname, 'pkgs');
const adir = path.resolve(__dirname, 'a');
const bdir = path.resolve(__dirname, 'b');

const alias = {
    'a': adir,
    'b': bdir,
    'packages': pkgsdir,
    '#': pkgsdir,
};

// ... snip


const wpconfig = {
    context,
    entry: path.resolve(context, 'index.js'),
    output: {
        path: dist,
        filename: 'out.js',
    },
    mode: 'production',
    resolve: {
        alias,
        modules: [
            'node_modules',
        ],
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'css-loader',
                        options: {
                            alias,
                        },
                    },
                ],
            },
            {
                loader: 'file-loader',
                // ... snip
            },
        ],
    },
    // ... snip
};

现在，在该 repo 中有一个js包含 的文件require('packages/b/img.png')，以及一个css包含url('packages/b/img.png').

只有js一个有效。尽管css-loader's docs说什么，它似乎将路径视为相对于解析器上下文而没有注意到别名。

这是一个错误，还是我犯了配置错误？

标签： csswebpackcss-loader