webpack - 如何使用 webpack 将相对路径别名为自定义路径？

Question

一个项目使用模块 A。

该模块需要本地路径，例如 require('./otherModule') .

如何让 webpack 从另一个目录解析这个路径，如果它不存在则回退到正常解析？

Answer 1

没有简单的方法来给相对 require() 起别名像 require('./otherModule'). 这样的语句我不建议这样做。它打破了文件路径的基本概念，可能会使其他程序员感到困惑。

根相对路径(推荐)

您可以使用“根相对”路径。这些是以 / 开头的路径.然后你可以写这样的需求语句 require("/app/controller/otherModule.js") .你只需要告诉 webpack 你的 root是:

// webpack.config.js

module.exports = {
    ...
    resolve: {
        root: "/absolute/path/to/your/folder"
    }
    ...
};

您还可以提供一组到 root 的路径。 .

解析器插件(不推荐)

但是，如果你真的需要给这些路径起别名，你可以 Hook webpack 的解析机制。 Webpack 为插件提供了广泛的 API 来改变其行为。重写所有相对路径的插件如下所示:

// webpack.config.js

var myWebpackPlugin = {
    apply: function (compiler) {
        compiler.resolvers.normal.apply(myResolverPlugin)
    }
};

var myResolverPlugin = {
    apply: function (resolver) {
        resolver.plugin("resolve", function (context, request) {
            if (request.path[0] === ".") {
                request.path = path.resolve(__dirname,
                    "whatever", "you", "like", request.path);
            }
        });
    }
}

module.exports = {
    ...
    plugins: [
        myWebpackPlugin
    ]
};