javascript - 为什么我的配置无法正确解析别名？

Question

我的 webpack 配置中有以下 resolve 选项:

resolve: {
    modules: ["./app/static/js/homepage/", "./app/static/js/dashboard/",],
    extensions: [".js", ],
    alias: {
        "bootstrap": "../../bower_components/bootstrap/dist/js/bootstrap",
        "lodash": "../../bower_components/lodash/lodash",
    // ...

但我收到此错误:

ERROR in ./app/static/js/dashboard/main.js
Module not found: Error: Can't resolve 'underscore' in '/app/app/static/js/dashboard'
 @ ./app/static/js/dashboard/main.js 84:0-112:2

这意味着它不会将下划线视为别名，这种情况发生在我项目中的所有define上。

Answer 1

您将它们别名为相对路径，并进入两个目录(使用 ../../)，因此当您在 ./app/static/js 中导入 lodash 时/dashboard/main.js，它会尝试在

中查找模块

./app/static/bower_components/lodash/lodash

假设您的 bower_components 位于项目的顶层(按照建议)，您可以通过向上四个目录修复别名:

alias: {
  "bootstrap": "../../../../bower_components/bootstrap/dist/js/bootstrap",
  "lodash": "../../../../bower_components/lodash/lodash",
}

请注意，只有当您将它们导入到四层深度的文件中时，这才有效。用绝对路径替换它们在任何地方都适用。

一个更简洁的解决方案是向模块添加 bower_components ，这样它就会在每个 bower_component 目录中查找，这是将 Bower 集成到 webpack 中的常用方法。这样，您就可以使用 import _ from 'lodash/lodash' 而不添加任何别名。但如果您仍然想拥有别名，可以按如下方式操作:

resolve: {
  modules: ["bower_components"],
  extensions: [".js"],
  alias: {
    "bootstrap": "bootstrap/dist/js/bootstrap",
    "lodash": "lodash/lodash",
  }
}