为什么 webpack 试图解析我的依赖路径中的每个文件？

Question

我有一个大型项目，我一直在重构它以使用 webpack 和 ES6 模块。我的许多依赖项都使用 commonJS 或 AMD 模块，所以我需要它们以旧方式。

例如，

const Pikaday = require("pikaday");

不幸的是，当我现在跑步时

webpack --progress

看起来 webpack 正在尝试解析该路径中的每个文件。我收到几个警告，例如：

Module parse failed: /path/to/node_modules/pikaday/index.html 

最终，我收到以下错误：

ERROR in ./~/pikaday/tests/methods.js
Module not found: Error: Cannot resolve module 'expect.js' in 
/Users/myuser/web/myproject/node_modules/pikaday/tests

我从这个依赖项中的测试目录中得到一个错误，我显然不关心解析我的包。 为什么 webpack 会尝试解析该路径中的每个文件，我该如何纠正这种行为？

---

为清楚起见，我将在此处发布我的 webpack.config.js 文件的重要部分。

var webpack = require("webpack");
var path = require("path");

module.exports = {
    entry : {
        main     : './public/src/Main/main.js',   
    },
    output : {
        path        : './public/build',
        filename    : '[name].bundle.js'
    },
    module : {
        loaders : [
            {
                test : /\.json$/,
                loader : 'json'
            },
            {
                test : /\.js$/,
                loader : "babel?presets[]=es2015"
            },
            {
                test    : /\.css$/,
                loaders  : [
                    'style',
                    'css'
                ]
            },
            {
                test: /\.scss$/,
                loaders: ["style", "css", "sass"]
            },
            {
                test    : /\.(svg|jpg|png|jpeg)$/,
                loader  : 'url'
            },
            {
                test : /vendor\/.+\.(jsx|js)$/,
                loader : 'imports?jQuery=jquery,$=jquery,this=>window'
            }
        ]
    },
    "plugins" : [
        new webpack.ProvidePlugin({
            $               : "jquery",
            jQuery          : "jquery",
            "window.jQuery" : "jquery"
        }),
        new webpack.ProvidePlugin({
            $clamp : "clamp-js"
        }),
        new webpack.ProvidePlugin({

        })
    ]
};

Answer 1

在处理模块时，Webpack 会分析所有可以从您自己的代码中获取的依赖项，遍历所有内容。它将尝试处理 AMD 或 CommonJS 风格的代码。

在这种情况下，您正在加载的模块似乎没有使用 Webpack 可以正确分析的加载依赖项的格式。当代码来自here：

var id = 'moment';
try { moment = req(id); } catch (e) {}

运行，Webpack 不够聪明，无法看到 req(id) 实际上是 req('moment')。因为它无法知道id 是什么，它会认为req(id) 可能正在加载Pikaday 模块内的任何 文件，正如您所看到的，该模块包括@987654331 @ 文件夹和 index.html 文件，这两者都会给您带来问题。

在这种情况下你很幸运，因为虽然模块的 AMD 部分不可解析，但该模块还包含一个 CommonJS 前缀 here， 可以被 Webpack 解析。因此，您应该能够按照 Is there a way to disable AMDPlugin? 的说明进行操作，这将使 Webpack 停止处理 AMD 模块，从而使用代码的 CommonJS 部分。

请记住，如果您确实需要依赖任何 AMD 模块，这会破坏这些模块，但无论如何，如今大多数东西都是 CommonJS。

无论哪种方式，在 Pikaday 模块上提交一个错误肯定会很好，因为这应该是模块本身的一个微不足道的修复。