如何使用 Webpack 的模块别名

Question

别名是 webpack 的便捷方式，可以减少导入常用模块的时间和按键次数。 你将需要 path 模块，包含在 node.js 中，因为它是告诉 webpack 去哪里寻找那些特定文件的方式。 使用 resolve.alias 属性，您可以为经常导入的模块定义别名。 下面是一个例子：

const path = require("path");

module.exports = {
  resolve: {
    alias: {
      Library: path.resolve(__dirname, "root/library/"),
      Single: path.resolve(__dirname, "root/test.js"),
    },
  },
};

所以现在当你想从库模块中导入一个文件时，你可以使用 import {file} from 'Library/fileLocation 或者如果您包含带有别名的文件， import {test} from 'Single'。

使用别名作为布尔值

如果您已经通过 CDN 为您的应用程序加载库并将其作为依赖项，这将在您的应用程序中产生冲突。 因此，您可以在 resolve.alias 冲突模块的属性并将其设置为 false 以解决冲突。

module.exports = {
  resolve: {
    alias: {
      "path/to/ignored/module": false,
    },
  },
};

使用 $ 进行精确匹配

您可以添加尾随 $ 添加到别名定义并通过这样做确保如果路径不完全匹配，则强制出错。

const path = require("path");

module.exports = {
  resolve: {
    alias: {
      Single$: path.resolve(__dirname, "root/test.js"),
    },
  },
};

所以现在当你尝试导入 test.js 时：

import Test from "Single"; // success
import Test2 from "Single/test.js"; // error, root/test.js is invalid