Javascript 为什么我的配置不能正确解析别名?

Javascript 为什么我的配置不能正确解析别名?,javascript,webpack,webpack-2,Javascript,Webpack,Webpack 2,我的网页包配置中有以下解析选项: resolve: { modules: ["./app/static/js/homepage/", "./app/static/js/dashboard/",], extensions: [".js", ], alias: { "bootstrap": "../../bower_components/bootstrap/dist/js/bootstrap", "lodash": "../../bower_c

我的网页包配置中有以下解析选项:

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

这意味着它不会将下划线视为别名,这会发生在我的项目中的所有定义上。

您将其别名化为一个相对路径,并使用.././进入两个目录,因此当您在./app/static/js/dashboard/main.js中导入lodash时,它将尝试在中查找模块

./app/static/bower_components/lodash/lodash
假设您的bower_组件按照建议位于项目的顶层,您可以通过向上移动四个目录来修复别名:

alias: {
  "bootstrap": "../../../../bower_components/bootstrap/dist/js/bootstrap",
  "lodash": "../../../../bower_components/lodash/lodash",
}
请注意,只有在将它们导入到四级深的文件中时,这才有效。用绝对路径替换它们将在任何地方都有效

一个更干净的解决方案是将bower_组件添加到您的模块中,因此它会在每个bower_组件目录中查找,这是将bower集成到webpack的常用方法。这样,您就可以使用“lodash/lodash”中的import uu,而无需添加任何别名。但如果您仍希望使用别名,则可以按如下方式进行:

resolve: {
  modules: ["bower_components"],
  extensions: [".js"],
  alias: {
    "bootstrap": "bootstrap/dist/js/bootstrap",
    "lodash": "lodash/lodash",
  }
}
将bower_组件添加到模块中修复了它。出于某种原因,我确信我的道路是正确的=