javascript - 为什么 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 模块包括 tests 文件夹和 index.html 文件，这两个文件都会给您带来问题。

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

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

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