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

Question

我可以get the relative file path与 __filename ，当然我可以将其分解以获得带有一些 JS-fu 的基本名称，但我想在编译时执行此操作。

DefinePlugin会让我注入(inject)一些我想要的全局变量，但是我不能有一个基于当前文件的“动态”全局变量。

那么我该怎么做呢？

例如假设我在文件 assets/scripts/lib/components/bpm/RecordAttendancePopup.jsx 中，如何让 webpack 注入(inject)像 __basename 这样的常量，其计算结果为 “记录出勤弹出窗口”？

Answer 1

通用版本

如果您使用模块或任何受支持的捆绑程序，您可以访问预先存在的 import.meta.url 并手动提取文件名:

const filename = import.meta.url // Get current path
  .split(/[\\/]/).pop() // Get current filename
  .replace(/\.[^.]+$/, ''); // Drop extension

或者您可以使用更好的解析器(这可能会或可能不会工作，具体取决于您的配置)

const path = require('path');
const filename = path.parse(import.meta.url).name;

Webpack 特定版本

这是我在 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)
            )
        })
    ]
};

然后我的源代码中的任何地方都可以使用 __filebasename 变量。适用于 Webpack 4 和 5。