如何使用webpack获取脚本中的原始文件路径? [英] How to get original file path in the script with webpack?

问题描述

示例代码:

//in the file app.module.js
module.exports = framework.module("app", [
    require('./api/api.module').name
])

//in the file app/api/api.module.js
module.exports = framework.module("app.api", [
])

这里有两个名为app"和api"的依赖模块.模块名称始终与模块文件的文件路径相同(module.js 部分除外，例如对于 app/api/api.module.js 中的文件，模块名称为 'app.api').

Here are two dependent modules named 'app' and 'api'. Module name is always same as file path to the module file (except module.js part, e.g. for file at app/api/api.module.js module name is 'app.api').

是否可以让webpack在编译时提供包含文件的文件名，这样可以做到以下几点?

Is it possible to make webpack provide a filename of the included file during compilation, so following can be done?

//in the file app.module.js
module.exports = framework.module(__filename, [
    require('./api/api.module').name
])

//in the file app/api/api.module.js
module.exports = framework.module(__filename, [
])

其中 __filename 是文件夹的实际路径.

Where __filename is an actual path to the file folder.

模块名称的格式并不重要，但它应该是唯一的(出于框架原因)并指向模块位置(出于调试原因).

It does not really matter what's format of name of the module, but it should be unique (for framework reasons) and lead to the module location (for debug reasons).

更新:我已经为自己解决了 - 这可以通过自定义 webpack 加载器来完成，它用文件路径字符串替换某个占位符.但无论如何问题仍然存在.

Update: I've solved it for myself - this can be done by custom webpack loader which substitutes a certain placeholder with file path string. But anyway question is still open.

推荐答案

我知道你说过你自己解决了这个问题，但是，这是我的看法.

I know you said you resolved this yourself, yet, here's my take on it.

您的解决方案包括使用自定义加载器，但是，也许您可​​以用不同的方式解决它.

Your solution includes using a custom loader, however, maybe you could have solved it in a different way.

第一步，在你的 webpack.config 中将这些添加到配置对象中:

First step, in your webpack.config add these in the config object:

context: __dirname, //set the context of your app to be the project directory
node: {
    __dirname: true //Allow use of __dirname in modules, based on context
},

然后，将其添加到您的插件列表中:

Then, add this in your list of plugins:

new webpack.DefinePlugin({
    SEPARATOR: JSON.stringify(path.sep)    
})

这将用正确的路径分隔符替换模块中的所有 SEPARATOR 实例，对于您正在使用的系统(您必须require('path')code> 在您的 webpack.config 中使其工作)

This will replace all SEPARATOR instances in your modules with whatever the correct path separator is, for the system you are working on (you will have to require('path') in your webpack.config for this to work)

最后在任何你想要的模块中，你现在可以通过执行

And finally in whatever module you want you can now get its name by doing

var moduleName = __dirname.replace(new RegExp(SEPARATOR, 'g'), '.');

所以，例如

//in the file app.module.js
var moduleName = __dirname.replace(new RegExp(SEPARATOR, 'g'), '.');
module.exports = framework.module(moduleName, [
    require('./api/api.module').name
])

//in the file app/api/api.module.js
var moduleName = __dirname.replace(new RegExp(SEPARATOR, 'g'), '.');
module.exports = framework.module(moduleName, [
])

这篇关于如何使用webpack获取脚本中的原始文件路径?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！