node.js - Webpack 找不到实际存在的模块

Question

我有麻烦了，我刚做了npm uninstall react-bootstrap然后 npm install react-bootstrap并且 webpack 不能再加载这个模块了。

我像这样启动 webpack:

/var/www/cloud/node_modules/.bin/webpack --config webpack.config.js --watch --display-error-details

这是错误，它只是找不到 package.json里面 react-bootstrap :

ERROR in ./core/static/core/js/modules/dashboard/admin/Customer.js
Module not found: Error: Cannot resolve module 'react-bootstrap' in /var/www/cloud/core/static/core/js/modules/dashboard/admin
resolve module react-bootstrap in /var/www/cloud/core/static/core/js/modules/dashboard/admin
  looking for modules in /var/www/cloud/node_modules
    resolve 'file' react-bootstrap in /var/www/cloud/node_modules
      resolve file
        /var/www/cloud/node_modules/react-bootstrap is not a file
        /var/www/cloud/node_modules/react-bootstrap.js doesn't exist
        /var/www/cloud/node_modules/react-bootstrap.jsx doesn't exist
    resolve 'file' or 'directory' /var/www/cloud/node_modules/react-bootstrap
      resolve file
        /var/www/cloud/node_modules/react-bootstrap is not a file
        /var/www/cloud/node_modules/react-bootstrap.js doesn't exist
        /var/www/cloud/node_modules/react-bootstrap.jsx doesn't exist
      resolve directory
        use lib/index.js from package.json
          resolve 'file' or 'directory' lib/index.js in /var/www/cloud/node_modules/react-bootstrap
            resolve file
              /var/www/cloud/node_modules/react-bootstrap/lib/index.js doesn't exist
              /var/www/cloud/node_modules/react-bootstrap/lib/index.js.js doesn't exist
              /var/www/cloud/node_modules/react-bootstrap/lib/index.js.jsx doesn't exist
            resolve directory
              /var/www/cloud/node_modules/react-bootstrap/lib/index.js/package.json doesn't exist (directory description file)
              /var/www/cloud/node_modules/react-bootstrap/lib/index.js doesn't exist (directory default file)
        directory default file index
          resolve file index in /var/www/cloud/node_modules/react-bootstrap
            /var/www/cloud/node_modules/react-bootstrap/index doesn't exist
            /var/www/cloud/node_modules/react-bootstrap/index.js doesn't exist
            /var/www/cloud/node_modules/react-bootstrap/index.jsx doesn't exist

真奇怪，我的 package.json好像 :

{
  "name": "cloud",
  "version": "1.0.0",
  "description": "hehe",
  "main": "gulp.js",
  "scripts": {
    "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "author": "",
  "license": "",
    "dependencies": {
    "anima": "^0.4.0",
    "immutable": "^3.7.4",
    "imports-loader": "^0.6.4",
    "moment": "^2.10.3",
    "react-bootstrap": "^0.23.7",
    "react-google-recaptcha": "^0.3.2",
    "react-paginate": "^0.1.31",
    "script-loader": "^0.6.1",
    "underscore": "^1.8.3"
  },
  "devDependencies": {
    "babel": "^5.5.6",
    "babel-core": "^5.5.6",
    "babel-loader": "^5.1.4",
    "css-loader": "^0.15.1",
    "node-libs-browser": "^0.5.2",
    "react-hot-loader": "^1.2.7",
    "style-loader": "^0.12.3",
    "webpack": "^1.9.10",
    "webpack-bundle-tracker": "0.0.51"
  }
}

还有我的 webpack 配置:

var path = require("path");
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker'); 
var bower_dir = __dirname + '/components/bower_components/';
var node_modules_dir = path.resolve(__dirname, 'node_modules');

module.exports = {
    context: __dirname,
    entry: {
        app: [ './core/static/core/js/main.js', ],
              vendor: ['react', 'react-router', 'react-bootstrap', 'react-google-recaptcha', 'react-spinkit'],  
    },    
    output: {
        path: path.resolve('./static/bundles/'),
        filename: 'bundle.js',
        publicPath:''           
    },  
    externals: {
        // require("jquery") is external and available
        //  on the global var jQuery
        "jquery": "jQuery",
        "utils": "utils"
    }, 
    plugins: [new BundleTracker({filename: './webpack-stats.json'}),
              new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js"),   
              /*new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        })*/],
              module: {
                  loaders: [{ test: /\.jsx?$/, exclude: node_modules_dir, loaders: ['babel']}, // to transform JSX into JS
                            { test: require.resolve("jquery"), loader: "imports?jQuery=jquery" },
                            { test: /\.json$/, loader: "json" },
                            { test: /\.css$/, loader: "style-loader!css-loader?root=." }],
              },
              resolve: {
                  modulesDirectories: ['node_modules', 'bower_components'],
                  extensions: ['', '.js', '.jsx']
              },
};

另外，文件夹 react-bootstrap确实存在于我的 node_modules .

我的树是这样的:

webpack.config.js
node_modules
package.json

我完全迷路了...

Answer 1

值得注意的是，webpack 将缓存存储在 node_modules/.cache/terser-webpack-plugin .我会尝试删除它并重新运行 webpack。这通常会为我解决捆绑问题，以至于我将它包含在我通过 npm run clean 调用的“干净”脚本中.