如何使用webpack获取没有路径和扩展名的当前文件名？

Question

I can get the relative file path with __filename , and sure I could hack it apart to get just the basename with some JS-fu, but I want to do this at compile-time.

DefinePlugin will let me inject some globals like I want, but AFAICT I can't have a "dynamic" global based on the current file.

So how can I do this?

eg given I am in the file assets/scripts/lib/components/bpm/RecordAttendancePopup.jsx , how can I get webpack to inject a constant like __basename that evaluates to "RecordAttendancePopup" ?

Answer 1

This is what I use in my webpack.config.js :

const path = require('path');
const webpack = require('webpack');

module.exports = {
    plugins: [
        new webpack.DefinePlugin({
            __filebasename: webpack.DefinePlugin.runtimeValue(
                info => JSON.stringify(path.parse(info.module.resource).name)
            )
        })
    ]
};

and then I'll have the __filebasename variable available everywhere in my source. Works in Webpack 4 and 5.

Answer 2

我想除了基于https://github.com/webpack/webpack/blob/master/lib/DefinePlugin.js创建您自己的“DefinePlugin”之外别无他法来获得您想要的。