为什么我的配置没有正确解析别名？

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

这意味着它不会将 underscore 视为别名，这发生在我项目中的所有 define 中。

Answer 1

你将它们别名化为一个相对路径并且你向上两个目录（使用 ../../），所以当你在 ./app/static/js/dashboard/main.js 中导入 lodash 时，它会尝试在 [=] 中找到模块19=]

./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",
  }
}

为什么我的配置没有正确解析别名？

Why are aliases not resolved correctly with my config?

javascript

webpack

webpack-2