Question

使用minimal repo对此问题进行了背景化，以便您可以重现我所看到的内容。

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

这是来自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的{{1}}文件和包含require('packages/b/img.png')的兄弟目录中的css文件。

只有url('packages/b/img.png')才有效。尽管js docs所说的，它似乎将路径视为相对于解析器上下文而不注意别名。

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

给定相同的别名配置，为什么`css-loader`没有像`enhanced-resolve`一样解析这个图像请求？

0 个答案: