获取 webpack 入口点名称并在 loader 中重用答案

【问题标题】：Get webpack entry point name and reuse it in loader获取 webpack 入口点名称并在 loader 中重用
【发布时间】：2020-05-13 14:53:33
【问题描述】：

我正在尝试根据入口点将一些数据传递给 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 更快地构建时间）。

有什么方法可以实现吗？

【问题讨论】：

经过一番挖掘，这是不可能的。您可以在使用优化选项 (webpack.js.org/configuration/optimization/…) 中的拆分块时访问该名称，但这对稍后的构建没有影响，因为如果已解析配置并且不会再次为第二个入口点运行配置。我的解决方案是使用两个构建任务并将它们与 npm-run-all 结合起来。

标签： javascript node.js webpack sass

【解决方案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
                }
            },
        ]
    },
]

【讨论】：