javascript - 获取 webpack 入口点名称并在加载器中重用它

Question

我正在尝试根据入口点将一些数据传递给 SCSS。我将有两个主题，我必须知道我目前捆绑的主题。

Webpack 入口点:

webpack: {
    entry: {
        toyota: path.resolve(__dirname, '../entries/theme.toyota.js'),
        lexus: path.resolve(__dirname, '../entries/theme.lexus.js'),
    },

然后，我想识别入口点，并将其作为变量传递给 SCSS:

  test: /\.s?css$/,
    exclude: /node_modules/,
    use: [{
            loader: 'sass-loader',
            options: {
                data: '$brand: "' + entryPointName +'";',
                sourceMap: true
            }
        },
    ]

我已经尝试过 [name]但没有运气...

我可以通过使用不同的 ENV 变量再次运行构建来实现这一点，但我希望通过一项任务来实现这一目标(通过 watch 实现更快的构建时间)。

有没有办法做到这一点？

Answer 1

最后，解决方案是 webpack 层...

webpack: {
    entry: {
        toyota: { import: path.resolve(__dirname, '../entries/theme.toyota.js'), layer: 'toyota' },
        lexus: { import: path.resolve(__dirname, '../entries/theme.lexus.js'), layer: 'lexus' },
    },
    experiments: {
        layers: true,
    },

test: /\.s?css$/,
exclude: /node_modules/,
oneOf: [
    {
        issuerLayer: 'toyota',
        use: [{
                loader: 'sass-loader',
                options: {
                    data: '$brand: "toyota";',
                    sourceMap: true
                }
            },
        ]
    },
    {
        issuerLayer: 'lexus',
        use: [{
                loader: 'sass-loader',
                options: {
                    data: '$brand: "lexus";',
                    sourceMap: true
                }
            },
        ]
    },
]