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

Posted 2023-03-08

【中文标题】获取 webpack 入口点名称并在 loader 中重用

【英文标题】：Get webpack entry point name and reuse it in 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 结合起来。

【参考方案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
                
            ,
        ]
    ,
]