webpack 找不到节点模块 ('bootstrap-multiselect' )

Question

我的 webpack 配置指定了许多要构建到 vendors.js 中的节点模块。所有模块均随 npm 安装，并驻留在父文件夹 node_modules 中。

文件夹结构:

app/scripts/a.js
node_modules/bootstrap-multiselect
webpack.config.js

来自 webpack.config.js 的片段:

entry: {
  vendors: ['jquery', 'bootstrap', 'bootstrap-multiselect']
}

这适用于“jquery”和“bootstrap”，但不适用于“bootstrap-multiselect”:

ERROR in multi vendors
Module not found: Error: Cannot resolve module 'bootstrap-multiselect' 
in /home/user/app

似乎 webpack 正在查找错误的 node_modules 文件夹。它看起来似乎是应用程序文件夹的根目录，但为什么它仍然会找到其他模块呢？因此，我添加了 resolve 和 resolveLoader 的每个变体，

resolveLoader: {root: path.join(__dirname, 'node_modules')};
resolve: {root: [path.join __dirname, 'node_modules']};

还是没有运气......

Answer 1

不知道为什么，但使用 npm 下载的 package.json 似乎没有正确配置。 main 条目指向一个不存在的文件。这就是您可能收到错误的原因。

package.json

"main": "dist/bootstrap-multiselect.js"

bootstrap-multiselect.js 文件不在 dist 下，而是在 dist/js 下。作为解决方法，您可以:

1. 在 vendors 字段和 require 字段中使用完整路径:

   vendors : ['jquery', 'bootstrap', 'bootstrap-multiselect/dist/js/bootstrap-multiselect']
   
   require('bootstrap-multiselect/dist/js/bootstrap-multiselect';
   

2. 或者，将包别名为 webpack.config.js 中的“真实”文件:

   resolve: {
     alias: {
       'bootstrap-multiselect': 'bootstrap-multiselect/dist/js/bootstrap-multiselect'
     }
   }
   

但是，它迟早应该被修复，因为我检查了 github 项目，那里有 package.json文件看起来正确。